我有一个带有模态的 React 应用程序，当单击一个按钮时会弹出带有游戏规则的弹出窗口。我想要做的是让它当我点击这个弹出窗口外的任何地方时它会关闭。我有三个文件。app.js、dialog.js 和 externalalerter.js。在我的主 app.js 中，当我单击一个按钮时，它会将状态设置为可见，因此我的元素采用它并基于它进行渲染。我的 outsideralerer.js 基本上检测是否有任何用特定标签包裹的东西之外的点击。现在问题来了，我有一个方法可以更改 app.js 中的可见性状态，所以为了让 outsderalerter.js 使用它，我将它传递给它，以便它可以访问我的主状态并更改它，以便当点击超出区域时，弹出窗口消失。除了关闭它，即使我在弹出窗口中单击，它也能正常工作，因为当我将值传递给 externalalerter 时，它会将整个身体视为无点击区域。我的问题是如何防止它触发并只传递一个值，或者是否可以从 externalalerter.js 更改 app.js 的状态值
应用程序.js
updateState() {
this.setState({ isOpen: false });
}
<div id='rule-button'>
<button onClick={(e)=>this.setState({isOpen : true})} id="modalBtn" class="button">Open Rules</button>
</div>
<OutsideAlerter updateParent={ this.updateState.bind(this)}/>
<Dialog isOpen={this.state.isOpen} onClose={(e)=>this.setState({isOpen : false})}>
</Dialog>
外部警报器.js
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
//alert('You clicked outside of me!');
{this.props.updateParent()};
}
}
我认为让模态占据窗口高度和宽度的全部空间并使其不可见，除了要显示的内容之外会更简单。
我们可以用 包裹模态onClick={hideModal}并包裹内部内容，onClick={e => e.stopPropagation()}这将防止我们的包装器触发hideModal处理程序。
class ModalWrapper extends React.Component {
state = { isModalOpen: true };
toggleModal = () => {
this.setState(({ isModalOpen }) => ({
isModalOpen: !isModalOpen
}));
};
render() {
const { isModalOpen } = this.state;
return (
<div className="App">
<button onClick={this.toggleModal}>Open Modal</button>
{isModalOpen && <Modal hideModal={this.toggleModal} />}
</div>
);
}
}
function Modal({ hideModal }) {
return (
<div onClick={hideModal} className="modal">
<div onClick={e => e.stopPropagation()} className="modal__content">
Modal content
</div>
</div>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句