response-responseive-modal: как предотвратить закрытие модального окна, когда мы щелкаем за пределами div

Question

Я использую response-response-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

Просто установите для onOverlayClick значение false, это решит проблему

Answer 3

Ваша проблема может быть решена с помощью свойства под названием closeOnOverlayClick={false}, при котором модальное окно не закрывается, когда мы нажимаем на оверлей