Antd表单如何通过setFieldsValue添加额外数据并在onFinish中获取

Antd普通表单的onFinish默认只返回对应Form.Item声明的字段，所以你通过setFieldsValue额外设置的id会被过滤，但Form.List因为动态字段的处理逻辑不同，能保留这些额外数据。以下是几种不用隐藏字段或Form.List包裹的解决方案：

方案1：用form.getFieldsValue(true)获取所有字段 #

直接在onFinish里调用form.getFieldsValue(true)，这个方法传入true后会返回所有已设置的字段，包括没有对应Form.Item的id：

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

const EditForm = () => {
  const [form] = Form.useForm();

  // 模拟从服务器加载编辑数据
  const loadEditData = async () => {
    const serverData = { id: 123, name: "张三", age: 28 };
    form.setFieldsValue(serverData);
  };

  const onFinish = () => {
    // 获取所有已设置的字段，包含id
    const fullValues = form.getFieldsValue(true);
    console.log(fullValues); // { id:123, name:"张三", age:28 }
    // 提交fullValues到服务器即可
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="name" label="姓名">
        <Input />
      </Form.Item>
      <Form.Item name="age" label="年龄">
        <Input type="number" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
        <Button onClick={loadEditData}>加载编辑数据</Button>
      </Form.Item>
    </Form>
  );
};

export default EditForm;

方案2：单独存储id，提交时合并 #

加载数据时把id存在组件的state或ref里，提交表单时和onFinish返回的表单值合并，这种方式更直观，不依赖Form的内部逻辑：

import { Form, Input, Button } from 'antd';
import { useState } from 'react';

const EditForm = () => {
  const [form] = Form.useForm();
  const [editId, setEditId] = useState<number | undefined>();

  const loadEditData = async () => {
    const serverData = { id: 123, name: "张三", age: 28 };
    // 只给表单设置有Form.Item的字段
    form.setFieldsValue({ name: serverData.name, age: serverData.age });
    // 单独存id
    setEditId(serverData.id);
  };

  const onFinish = (formValues: { name: string; age: number }) => {
    // 合并表单值和id
    const submitData = { ...formValues, id: editId };
    console.log(submitData); // { id:123, name:"张三", age:28 }
    // 提交submitData
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="name" label="姓名">
        <Input />
      </Form.Item>
      <Form.Item name="age" label="年龄">
        <Input type="number" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
        <Button onClick={loadEditData}>加载编辑数据</Button>
      </Form.Item>
    </Form>
  );
};

export default EditForm;

方案3：通过initialValues存储id，提交时获取 #

如果是组件初始化时就加载编辑数据，可以把id放到initialValues里，同样用getFieldsValue(true)获取完整数据：

import { Form, Input, Button } from 'antd';
import { useEffect } from 'react';

const EditForm = () => {
  const [form] = Form.useForm();

  useEffect(() => {
    const fetchEditData = async () => {
      const serverData = { id: 123, name: "张三", age: 28 };
      // 设置initialValues包含id
      form.setInitialValues(serverData);
    };
    fetchEditData();
  }, []);

  const onFinish = () => {
    const fullValues = form.getFieldsValue(true);
    console.log(fullValues); // { id:123, name:"张三", age:28 }
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="name" label="姓名">
        <Input />
      </Form.Item>
      <Form.Item name="age" label="年龄">
        <Input type="number" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default EditForm;

补充说明 #

Form.List能保留额外字段是因为它的动态字段逻辑会保留所有绑定的字段值，而普通表单默认只收集有对应Form.Item的字段。上面的方案都能绕过这个限制，不需要用Form.List包裹整个表单。

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