ReactJS показать модальную всплывающую форму по указанной клавише

Я новичок в ReactJS. Я пишу интерфейс для веб-приложения. Мое приложение должно отображать несколько модальных диалогов - каждый из них отображается для данной комбинации клавиш. Я намерен использовать JQuery-UI для модального диалогового окна.ReactJS показать модальную всплывающую форму по указанной клавише

В приведенной ниже таблице дает примерное представление о том, что я пытаюсь сделать:

Dialog Name  |  Key combination (required to popup/display modal dialog) 
============================================================================== 
ModalDialog1 |  Ctrl-X 
ModalDialog2 |  Shift + K 
ModalDialog2 |  Alt + Shift + M 

etc ....

Я «прячась» модальные формы в заголовке страницы (с помощью CSS, чтобы установить дисплей на нет) - это лучшая практика?

Это то, что моя домашняя страница выглядит следующим образом:

//index.html

<html> 
    <head> 
     ... 
    </head> 
    <body> 
     <div id="main"> 
     </div> 
    </body> 
</html>

Это то, что мой App.js и другие Реагировать компоненты выглядит следующим образом:

var React = require('react'); 
import ReactDOM from 'react-dom'; 

var PageHeader = require('./PageHeader'); 
var TopPanelLeftWindow = require('./TopPanelLeftWindow'); 
var TopPanelRightWindow = require('./TopPanelRightWindow'); 
var BottomPanel = require('./BottomPanel'); 


var App = React.createClass({ 

    render(){ 

     return (

      <div> 
       <div id="header"> 
        <PageHeader /> 
       </div> 
       <div> 
        <div> 
         <div><TopPanelLeftWindow/ ></div> 
         <div><TopPanelRightWindow/ ></div> 
        </div> 
       </div> 
       <div> 
        <div><BottomPanel/ ></div>    
       </div> 

      </div> 

     ); 
    } 

}); 

ReactDOM.render(<App/>, window.document.getElementById("main"));

//PageHeader.js

var React = require('react'); 

var ModalDialogue1 = require('./ModalDialogue1'); 
var ModalDialogue2 = require('./ModalDialogue2'); 


var PageHeader = React.createClass({ 

    render(){ 

     return (
      <div> 
       <div className="hiddenModalDialogs"> 
        <div className="invisible"><ModalDialogue1 /></div> 
        <div className="invisible"><ModalDialogue2 /></div> 
        <!-- etc .. -> 
       </div> 
      </div> 
     ); 
    } 

}); 

module.exports = PageHeader;

У меня есть два вопроса:

Является ли способ «скрывать» лучшие методы общения с модальными диалогами для веб-приложений ReactJs?
Как привязать клавиши к модальным диалоговым окнам так, чтобы они отображались при нажатии комбинации клавиш?

источник

2017-02-01 Homunculus Reticulli

Я бы использовал другой подход, чтобы скрыть элемент в приложении React.js. Я думаю, что состояние Реагента - это путь сюда. В компоненте App я бы добавил атрибуты состояния, чтобы решить, должен ли модаз быть показан или нет. Затем я отправил бы эти атрибуты в качестве реквизита для компонента PageHeader. Наконец, вы можете реализовать опору в самом модуле, чтобы решить, следует ли это показывать или нет (возможно, изменить имя класса css) и отправить ему значение, полученное вами из состояния компонента App.

Я сделал фрагмент, демонстрирующий пример без модальности, где я просто скрываю или показываю элемент, возвращая или не возвращая его из родителя.

class Header extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 

 
    render() { 
 
     let modal1; 
 
     if(this.props.showHeaderModal1){ 
 
      modal1=<h1>THIS SHOULD BE A MODAL</h1>; 
 
      } 
 
     return (
 
      <div> 
 
      {modal1} 
 
      </div> 
 
       ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      showHeaderModal1: false, 
 
     }; 
 
     this.toggle = this.toggle.bind(this); 
 
    } 
 

 
    toggle() { 
 
     this.setState({ 
 
      showHeaderModal1: !this.state.showHeaderModal1, 
 
     }); 
 
    } 
 

 
    render() { 
 
     return(
 
     <div> 
 
      <Header showHeaderModal1={this.state.showHeaderModal1} /> 
 
      <button onClick={this.toggle}>TOGGLE</button> 
 
     </div> 
 
     
 
     ); <div>{view}</div>; 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>

Наконец, я нашел this package обнаружить ketstrokes. Я не пробовал, но, полагаю, вам придется использовать его вместо кнопки в компоненте App.

источник

2017-02-01 14:55:23

ReactJS показать модальную всплывающую форму по указанной клавише

ответ

Смежные вопросы