React es6 es2015 模态弹窗 [英] React es6 es2015 modal popup

问题描述

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

我尝试了 react-bootstrap modal 和 skylight.但没有找到太多的运气.

谁能建议打开/关闭模式以及回调的最佳方式.

提前致谢.

解决方案

我已经整理了一个例子来说明你可以如何去做，利用父/子关系并传递一个回调.

场景基本是:

• 有一个父<App/>组件
• 它可以显示一个<Modal/>组件
• <App/>控制<Modal/>是否打开
• <App/> 将它的子元素 <Modal/> 传递给closeModal"的回调

查看这个 JSBin 示例以了解完整的解决方案:http://jsbin.com/cokola/edit?js,输出

还有一个视觉总结:

<Modal/> 只是一个哑"组件.它不控制"它是否打开.这取决于父 <App/>.父级通过传递回调 this.props.closeModal

通知它如何关闭自己

类 Modal 扩展 React.Component {使成为() {常量 { closeModal } = this.props;返回 (<div className="jumbotron" style={{position: 'absolute', width: '100%', top: 0, height: 500}}><h1>一些模态</h1><按钮className="btn btn-md btn-primary"onClick={closeModal}>关闭模式</按钮></div>)}}

<App/> 知道打开/关闭状态并控制其子项 <Modal/>

class App 扩展 React.Component {构造函数(道具){超级(道具)；这个.state = {模态打开:假};}_openModal() {this.setState({modalOpen: true});}_closeModal() {this.setState({modalOpen: false});}使成为() {常量 { modalOpen } = this.state;返回 (
<按钮className="btn btn-md btn-primary"onClick={this._openModal.bind(this)}>打开模态</按钮>{/* 只有在 "this.state.modalOpen === true" 时才显示模态 */}{模态打开?<模态closeModal={this._closeModal.bind(this)}/>:''}</div>);}}

I'm very new to React and ES6. I'm building a small application using React and I'm following ES6 standard. Now I need to open a modal window on a button click.

I tried react-bootstrap modal and skylight. But did not find much luck.

Can anyone suggest the best way of opening/closing modal along with a callback.

Thanks in advance.

解决方案

I've put together an example to illustrate how you might go about this, making use of the parent/child relationship and passing down a callback.

The scenario is basically:

• There is a parent <App /> component
• It can show a <Modal /> component
• <App /> controls whether the <Modal /> is open or not
• <App /> passes its child, <Modal />, a callback to "closeModal"

See this JSBin example for the full solution in action: http://jsbin.com/cokola/edit?js,output

And a visual summary:

<Modal /> is just a "dumb" component. It does not "control" whether it is open or not. This is up to the parent <App />. The parent informs it of how to close itself via passing down a callback 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 /> is aware of the open/closed state and controls its child, <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>
    );
  }
}

这篇关于React es6 es2015 模态弹窗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！