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

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

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

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

etc ....

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

Вот как выглядит моя домашняя страница:

//index.html

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

Вот как выглядит мой App.js и другие компоненты React:

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;

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

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

1 ответ

Я бы использовал другой подход, чтобы скрыть элемент в приложении 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>

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

Источник
Другие вопросы по тегам