React es6 es2015模态框弹出窗口

Question

我对React和ES6非常陌生。我正在使用React构建一个小型应用程序，并遵循ES6标准。现在，我需要在单击按钮时打开模态窗口。

我尝试了react-bootstrap modal和skylight，但没有得到很好的结果。

有人可以建议最佳方式来打开/关闭模态窗口以及回调吗？

提前感谢您的帮助。

- Jyo Banerjee

Answer 1

我已经示范了一个例子，以说明您如何使用父/子关系并传递回调来处理此问题。

基本情况如下：

• 有一个父组件<App />
• 它可以显示一个 <Modal /> 组件
• <App /> 控制是否打开 <Modal />
• <App /> 将关闭模态框的回调函数传递给其子组件 <Modal />

请参见 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>
    );
  }
}

- Erik Aybar