Question

我是ReactJS的新手。我正在将前端写入Web应用程序。我的应用程序需要显示几个模态对话框 - 每个对话框显示一个给定的组合键。我打算将JQuery-UI用于模态对话框。

下表简要介绍了我尝试做的事情：

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

etc ....

我是＆＃34;隐藏＆＃34;页面标题中的模态表单（使用css将显示设置为无） - 这是最佳实践吗？

这就是我的主页：

// 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;

我有两个问题：

是我隐藏的方式＆＃34; ReactJs webapps的模态对话最佳实践？
如何将击键绑定到模态对话框，以便在按下击键组合时显示它们？

Answer 1

我会使用不同的方法来隐藏React.js应用中的元素。我认为React的州是去这里的方式。在App组件中，我将添加状态属性来决定是否应该显示模态。然后我将该属性作为道具发送到PageHeader组件。最后，您可以在Modal本身中实现一个prop，以决定是否应该显示它（可能更改css className）并将其从App组件的状态发送给它。

我制作了一个片段，显示了一个没有模态的示例，我只是通过返回或不从父级返回来隐藏或显示元素。

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

最后，我发现this package来检测ketstrokes。我还没有尝试过，但我想你基本上必须使用它而不是App组件中的按钮。

ReactJS在指定的击键上显示模态弹出窗体

1 个答案: