Ant Design Form配置action属性后提交未触发问题解决方案

开发登录表单功能时，预期点击提交按钮后将表单数据发送至后端服务。项目采用Ant Design组件库开发，在Form组件上配置action属性传入后端服务接口地址（即action={url}），同时设置method为post、绑定onFinish回调函数，但点击提交按钮后未触发任何表单提交动作。
将外层Ant Design Form替换为原生HTML form标签，内部仍保留Form.Item、Input等Ant Design表单控件时，表单可正常提交，判断问题与Ant Design Form对action属性的处理逻辑相关，需要找到正确配置方式让Ant Design Form通过action属性完成原生表单提交。

问题复现代码 #

const handleSubmit = (val) => {
  console.log("Values : ", val);
};

<Form
  name="login"
  layout="vertical"
  autoComplete="off"
  action={url}
  method="post"
  onFinish={handleSubmit}
>
  <Form.Item
    htmlFor="username"
    label="Username"
    name="username"
    rules={[
      {
        required: true,
        message: `Please input your username!`,
      },
    ]}
  >
    <Input />
  </Form.Item>
  <Form.Item
    htmlFor="password"
    label="Password"
    name="password"
    rules={[
      {
        required: true,
        message: `Please input your password!`,
      },
    ]}
  >
    <Input.Password />
  </Form.Item>
  <Button
    size="large"
    htmlType="submit"
    name="login"
    id="login-btn"
  >
    Login
  </Button>
</Form>

Ant Design Form默认是受控表单模式，提交时会主动拦截原生表单的默认提交行为，先执行内置的字段校验逻辑，校验通过后触发绑定的onFinish回调，不会自动执行原生form基于action属性的跳转提交逻辑，因此即使配置了action和method，默认也不会触发原生提交。

根据实际需求二选一即可：

• 保留Ant Design表单校验、onFinish自定义逻辑，同时触发原生action提交

  1. 通过ref获取Form组件渲染的原生form DOM节点
  2. 在onFinish回调中（此时字段已经校验通过），手动调用原生form的submit()方法触发提交
  3. 注意：原生表单提交依赖控件的原生name属性识别字段，需要给Input、Input.Password等表单控件显式添加和字段名一致的name属性，否则提交时会丢失参数

  对应修正代码：

  const formRef = useRef(null);
  const handleSubmit = (val) => {
    console.log("Values : ", val);
    // 校验通过后手动触发原生提交
    formRef.current?.submit();
  };
  
  <Form
    ref={formRef}
    name="login"
    layout="vertical"
    autoComplete="off"
    action={url}
    method="post"
    onFinish={handleSubmit}
  >
    <Form.Item
      htmlFor="username"
      label="Username"
      name="username"
      rules={[
        {
          required: true,
          message: `Please input your username!`,
        },
      ]}
    >
      {/* 显式添加原生name属性 */}
      <Input name="username" />
    </Form.Item>
    <Form.Item
      htmlFor="password"
      label="Password"
      name="password"
      rules={[
        {
          required: true,
          message: `Please input your password!`,
        },
      ]}
    >
      {/* 显式添加原生name属性 */}
      <Input.Password name="password" />
    </Form.Item>
    <Button
      size="large"
      htmlType="submit"
      name="login"
      id="login-btn"
    >
      Login
    </Button>
  </Form>
  

• 不需要Ant Design内置校验、onFinish逻辑，直接走原生表单提交
  给Form组件添加preventDefault={false}属性，关闭组件对原生提交事件的拦截，此时Form的行为和原生HTML form完全一致，配置的action、method会直接生效，点击提交按钮就会触发原生提交。

  注意：该模式下Ant Design不会自动执行字段规则校验，绑定的onFinish回调也不会触发，同样需要给内部表单控件显式添加原生name属性才能正常携带提交参数。

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