反应es6 es2015模态弹出窗口

Question

我对React和ES6很新.我正在使用React构建一个小应用程序,我遵循ES6标准.现在我需要在按钮点击上打开一个模态窗口.

我试过react-bootstrap模态和天窗.但没有找到太多运气.

任何人都可以建议打开/关闭模态以及回调的最佳方式.

提前致谢.

Answer 1

我举了一个例子来说明你如何解决这个问题,利用父/子关系并传递一个回调.

场景基本上是:

• 有一个父<App />组件
• 它可以显示一个<Modal />组件
• <App />控制是否<Modal />开放
• <App />通过它的孩子,<Modal />回调"closeModal"

有关完整的解决方案,请参阅此JSBin示例:http://jsbin.com/cokola/edit？js,output

并有一个直观的总结:

<Modal />只是一个"愚蠢"的组成部分.它不"控制"它是否开放.这取决于父母<App />.父母通过传递回调通知它如何关闭自己this.props.closeModal

class Modal extends React.Component {
  render() {
    const { closeModal } = this.props;

    return (
      <div className="jumbotron" style={{position: 'absolute', width: '100%', top: 0, height: 500}}>
        <h1>Some Modal</h1>
        <button 
          className="btn btn-md btn-primary" 
          onClick={closeModal}
          >Close Modal</button>
      </div>
    )
  }
}

<App /> 意识到开放/关闭状态并控制其孩子, <Modal />

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false
    };
  }

  _openModal() {
    this.setState({modalOpen: true});
  }

  _closeModal() {
    this.setState({modalOpen: false});
  }

  render() {
    const { modalOpen } = this.state;

    return (
      <div>
        <button 
          className="btn btn-md btn-primary" 
          onClick={this._openModal.bind(this)}
          >Open Modal</button>

        {/* Only show Modal when "this.state.modalOpen === true" */}
        {modalOpen 
          ? <Modal closeModal={this._closeModal.bind(this)} />
          : ''}
      </div>
    );
  }
}