如何取消React中Bootstrap Modal的默认退出行为 关闭前完成数据校验

我需要在用户通过关闭按钮或模态框背景区域试图关闭Modal前，先对数据进行校验（例如表单内所有字段是否均已填写），校验通过则允许退出流程继续执行，校验失败则取消退出。现有代码如下：

<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事件，在关闭模态框前先执行数据校验即可，实现代码如下：

// 定义模态框关闭前的校验逻辑
const onModalHide = () => {
  // 校验通过才修改显隐状态关闭模态框
  if (validateData()) setIsShow(false);
};

// 给Modal组件绑定onHide事件，移除原有CloseButton的单独onClick事件即可
<Modal show={isShow} onHide={onModalHide} >
  <Modal.Header>
    <Modal.Title>Profile</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    {...}
  </Modal.Body>
</Modal>

• 实现逻辑说明：onHide事件会在用户点击模态框自带关闭按钮、点击模态框背景区域时统一触发，你只需要在自定义的校验函数validateData返回true（校验通过）时才修改控制模态框显隐的isShow状态，校验失败时不做任何操作，模态框就会保持显示状态，不会被关闭。

内容的提问来源于stack exchange，提问作者NaCl Yen