Javascript react responsive model：当我们在div外部单击时，如何防止关闭model

我正在使用来实现我的模态。我面临的一个问题是，当我单击屏幕上的任意位置时，我的模态被关闭，在模态div之外。 我希望仅在单击“取消”或“关闭”按钮时关闭模式。 我找到了onOverlayClick函数道具，并用它应用了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

类CustomModal扩展组件{
建造师（道具）{
超级（道具）；
}
onOverlay=（e）=>{
e、 预防默认值（）；
}
render（）{
const{props}=this；
返回(
这个.onOverlay（e）}中心>
“你确定吗？”
{
！！道具。表演取消&&
取消
}
好啊
)
}
}
导出默认CustomModal

您的问题可以通过使用名为

closeOnOverlayClick={false}的属性来解决

这使得当我们单击覆盖时模式不会关闭

您的问题可以通过使用名为

closeOnOverlayClick={false}的属性来解决

这使得当我们点击覆盖时模式不会关闭

你可以在你的模式组件中添加

closeOnOverlayClick={false}

你可以在你的模式组件中添加

closeOnOverlayClick={false}

，只要设置onOverlayClick为false，就能解决问题

只要设置onOverlayClick为false，这将解决问题