react-responsive-modal ：当我们在 div 之外单击时如何防止关闭模态

Question

我正在使用 react-responsive-modal 来实现我的模式。我面临的一个问题是，当我在屏幕上的任意位置单击模态 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

Answer 1

您的问题可以通过使用名为 closeOnOverlayClick={false} 的属性来解决，这使得当我们点击叠加层时模态框不会关闭

Answer 2

您可以在您的 Modal 组件中添加 closeOnOverlayClick={false}

Answer 3

只需将onOverlayClick设置为false即可解决问题

react-responsive-modal ：当我们在 div 之外单击时如何防止关闭模态

react-responsive-modal : how to prevent closing of modal when we click outside the div

html

javascript

css

modal-dialog

reactjs