ReactJS表单提交前自定义确认弹窗实现疑问

首先纠正你代码里的一个问题：当前onBefore直接赋值为window.confirm('Submit?')，这会在初始化post请求时就立刻执行弹窗，而不是在提交前触发。正确的写法是把onBefore设为一个函数。

接下来是用自定义Modal替代默认弹窗的实现思路，核心是利用异步Promise等待用户的交互结果：

实现步骤 #

• 将onBefore定义为异步函数，返回Promise
• 在函数中显示自定义Modal，监听用户的确认/取消操作
• 用户点击「确认」时resolve Promise，触发表单提交；点击「取消」时reject Promise，终止提交流程

代码示例（原生JS自定义Modal） #

假设你已经提前写好隐藏状态的自定义Modal结构：

<!-- 自定义Modal -->
<div id="customConfirmModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; background:white; border:1px solid #ccc; z-index:999;">
  <p>确认提交吗？</p>
  <button id="confirmBtn">确认</button>
  <button id="cancelBtn">取消</button>
</div>

修改post请求的代码：

post('/submit', {
  data: data,

  // 改用异步函数返回Promise
  onBefore: () => {
    return new Promise((resolve, reject) => {
      const modal = document.getElementById('customConfirmModal');
      const confirmBtn = document.getElementById('confirmBtn');
      const cancelBtn = document.getElementById('cancelBtn');

      // 显示Modal
      modal.style.display = 'block';

      // 绑定按钮事件（用完及时移除避免重复绑定）
      const handleConfirm = () => {
        modal.style.display = 'none';
        confirmBtn.removeEventListener('click', handleConfirm);
        cancelBtn.removeEventListener('click', handleCancel);
        resolve(); // 允许提交
      };

      const handleCancel = () => {
        modal.style.display = 'none';
        confirmBtn.removeEventListener('click', handleConfirm);
        cancelBtn.removeEventListener('click', handleCancel);
        reject(new Error('用户取消提交')); // 终止提交
      };

      confirmBtn.addEventListener('click', handleConfirm);
      cancelBtn.addEventListener('click', handleCancel);
    });
  },

  // 注意：onSuccess必须是函数，否则初始化时就会执行reset
  onSuccess: (e) => {
    e.target.reset();
  }
})

框架场景示例（以React + Ant Design为例） #

如果用React生态的UI组件库，写法更简洁：

post('/submit', {
  data: data,

  onBefore: () => {
    return new Promise((resolve, reject) => {
      Modal.confirm({
        title: '确认提交',
        content: '你确定要提交表单吗？',
        onOk: () => resolve(),
        onCancel: () => reject(new Error('用户取消提交'))
      });
    });
  },

  onSuccess: (e) => {
    e.target.reset();
  }
})

关键说明：

• 确保onBefore返回的Promise在用户确认时resolve，取消时reject，请求库会根据Promise状态决定是否执行提交
• 原代码中onSuccess直接写e.target.reset()会导致初始化时就清空表单，必须改成接收事件参数的函数

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