react-responsive-modal：當我們在 div 外部單擊時如何防止關閉模態

Question

我正在使用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

Answer 1

您的問題可以通過使用名為closeOnOverlayClick={false}的屬性來解決，這使得當我們點擊疊加層時模式不會關閉

Answer 2

您可以在模態組件中添加closeOnOverlayClick={false}

Answer 3

只需將 onOverlayClick 設置為 false，即可解決問題