[英]react-responsive-modal : how to prevent closing of modal when we click outside the div
我正在使用react-responsive-modal来实现我的模态。 我面临的一个问题是,当我在屏幕上的任意位置单击模态 div 之外时,我的模态会关闭。 我希望仅当我单击取消或关闭按钮时关闭我的模态。 我找到了 onOverlayClick function 道具,我用它来应用 preventDefault 但它没有用。
任何人都可以建议一种实现此功能的方法。 提前致谢。
class CustomModal extends Component{
constructor(props) {
super(props);
}
onOverlay = (e) =>{
e.preventDefault();
}
render(){
const { props } = this;
return(
<Modal open={props.open} onClose={props.onCloseModal}
onOverlayClick={e =>this.onOverlay(e)} center>
<div className="on-setting-modal">
<h6>"are you sure ?"</h6>
<div className="on-setting-modal-buttons">
{
!!props.showCancel &&
<button onClick={props.onCloseModal} >Cancel</button>
}
<button onClick={props.onOkModal} >OK</button>
</div>
</div>
</Modal>
)
}
}
export default CustomModal
您的问题可以通过使用名为closeOnOverlayClick={false}
的属性来解决,这使得当我们点击叠加层时模式不会关闭
您可以在模态组件中添加closeOnOverlayClick={false}
只需将 onOverlayClick 设置为 false,即可解决问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.