反应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>
    );
  }
}