[已解决]如何取消 "bootstrap modal" 退出行为？

Question

在用户打算通过关闭按钮或背景区域关闭模式之前，我需要验证数据（例如填写表单中的所有字段）。

如果它有效则让退出过程继续，否则取消它。

<Modal show={isShow} keyboard={false} >
  <Modal.Header>
    <Modal.Title>Profile</Modal.Title>
    <CloseButton onClick={onClose} />
  </Modal.Header>
  <Modal.Body>
    {...}
  </Modal.Body>
</Modal>

在 React 中可以做到这一点吗？

---

解决方案

根据Modal#onHide的描述，我收听onHide然后在关闭它之前验证数据。

const onModalHide = () => {
  if (validateData()) setIsShow(false);
};

<Modal show={isShow} onHide={onModalHide} >
  <Modal.Header>
    <Modal.Title>Profile</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    {...}
  </Modal.Body>
</Modal>

Answer 1

我猜 onClose 正在改变 isShow 状态。

在这种情况下，只需检查您是否要关闭模态：

const onClose = () => {
  if(validateFormLogic()) //this is where you validate your form
    setIsShow(false);
}

<Modal show={isShow} keyboard={false} >
  <Modal.Header>
    <Modal.Title>Profile</Modal.Title>
    <CloseButton onClick={onClose} />
  </Modal.Header>
  <Modal.Body>
    {...}
  </Modal.Body>
</Modal>

您决定何时关闭模式，而不是bootstrap也不做出反应。

Answer 2

您将需要手动 select 模态 ID 并监听 hide.bs.modal 事件

您正在使用 bootstrap 所以可能已经导入 jquery 所以：

$('#myModal').on('hide.bs.modal', function (e) {
   if (!validated) return e.preventDefault() 
})

或者用js:

document.addEventListener('hide.bs.modal', function(e) {
    if (event.target.id == 'myModal') {
      if (!validated) return e.preventDefault();
    }
});