如何在Antd PopConfirm确认后提交Antd表单？

核心思路是通过表单实例手动控制提交时机，避免按钮默认提交行为和弹窗逻辑冲突，具体实现如下：

1. 通过Form.useForm()获取表单实例，用于手动触发提交
2. 移除按钮的htmlType="submit"属性，取消默认提交行为
3. 在Popconfirm的onConfirm回调里调用表单实例的submit()方法完成提交
4. 给按钮添加onClick事件，处理非过去日期时直接提交的场景

完整代码示例：

import { Form, Button, Popconfirm } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();
  // 替换为你已实现的过去日期判断逻辑
  const isPastDate = false;

  const handleSubmit = (values) => {
    // 表单提交后的业务逻辑，比如接口请求
    console.log('提交的表单数据:', values);
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      {/* 你的表单项，比如日期选择器 */}
      <Form.Item name="selectDate" label="选择日期">
        {/* 这里放置你的日期选择组件 */}
      </Form.Item>

      <Popconfirm
        onConfirm={() => form.submit()}
        cancelText={'No'}
        okText={'Yes'}
        disabled={!isPastDate}
        title={'Do you wish to continue with past date?'}
      >
        <Button 
          type="primary"
          onClick={() => {
            // 非过去日期时直接提交表单
            if (!isPastDate) form.submit();
          }}
        >
          Save
        </Button>
      </Popconfirm>
    </Form>
  );
};

export default MyForm;

关键逻辑说明： #

• 用form.submit()完全接管提交触发，确保只有在用户确认弹窗（或非过去日期）时才提交
• 当isPastDate为false时，Popconfirm处于禁用状态，点击按钮会直接触发onClick里的提交逻辑
• 表单的onFinish回调保持原有写法，不影响你原本的提交业务逻辑

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