反应es6 es2015模态弹出窗口 [英] React es6 es2015 modal popup

问题描述

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

我尝试了反应自举模式和天窗。但是没有发现很多运气。

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

提前感谢

解决方案

我已经举了一个例子来说明你可以如何去做，使用的父/子关系，并传递回调。

该方案基本上是：

• 有一个父< 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 =jumbotronstyle = {{position：'absolute'，width：'100％'，top：0，height：500}}> 
< h1>某些Modal< / h1> 
< button 
 className =btn btn-md btn-primary
 onClick = {closeModal} 
> ;关闭模式< / button> 
< / div> 
）
} 
} 
  

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

  class App extends React.Component {
 
构造器（道具）{
 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）} 
>打开模式< / button> 
 
 {/ *只有当this.state.modalOpen === true* /} 
 {modalOpen 
？< Modal 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>
    );
  }
}

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