Ant Design中点击Modal确认按钮提交内部Form表单的实现方法

开发者阿泽

2026-8-27

实现方案

直接通过 Form 实例的submit方法触发提交即可，不需要把Modal的确认按钮挪到Form内部。

具体修改点

调用Form.useForm()创建表单实例，绑定到弹窗内的Form组件上
Modal的onOk回调里不直接关弹窗，改为调用表单实例的submit()方法，该方法会自动执行所有表单校验规则，校验通过后自动触发Form绑定的onFinish回调
把关闭弹窗的逻辑挪到接口请求成功之后，避免提交失败时弹窗直接关闭，用户已填写的内容丢失

修改后完整代码

状态与逻辑部分

// 创建表单实例
const [editForm] = Form.useForm();
const [isEditModalVisible, setIsEditModalVisible] = useState(false);

const showEditModal = () => {
  // 打开弹窗前重置表单，清除上次输入残留
  editForm.resetFields();
  setIsEditModalVisible(true);
};

const handleEditOk = () => {
  // 主动触发表单提交+校验
  editForm.submit();
};

const handleEditCancel = () => {
  setIsEditModalVisible(false);
};

const handleEditFormSubmit = async (values) => {
  const { name, description } = values;
  await updateProduct(name, description);
  // 提交成功后再关闭弹窗
  setIsEditModalVisible(false);
};

组件渲染部分

<Modal
  title="Edit"
  visible={isEditModalVisible}
  onOk={handleEditOk}
  onCancel={handleEditCancel}
  okText="Confirm"
  cancelText="Cancel"
>
  {/* 绑定表单实例 */}
  <Form 
    form={editForm} 
    layout="vertical" 
    onFinish={handleEditFormSubmit}
  >
    <Form.Item
      name="name"
      label={<h5>Name</h5>}
      rules={[{ required: true }]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      name="description"
      label={<h5>Description</h5>}
      rules={[{ required: true }]}
    >
      <Input />
    </Form.Item>
  </Form>
</Modal>