我对 React 和 ES6 很陌生。我正在使用 React 构建一个小型应用程序，并且遵循 ES6 标准。现在我需要在单击按钮时打开一个模态窗口。
我尝试了 react-bootstrap modal 和 skylight。但是没有找到多少运气。
任何人都可以建议打开/关闭模态以及回调的最佳方式。
提前致谢。
React es6 es2015 模态弹窗
IT技术
modal-dialog
reactjs
ecmascript-6
2021-05-05 14:17:40
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>
);
}
}