如何点击Main Submit按钮一键保存包含Add field功能的所有表单数据？

你遇到的核心问题是内层Demo组件维护了独立的Form实例，它的数据没有和外层主Form关联，导致必须单独提交才能保存。下面是两种实用的解决方案：

方案一：将动态字段整合到主Form中（推荐） #

用Ant Design的Form.List组件实现动态添加字段的功能，把所有字段逻辑直接放到主Form里，这样所有数据都归属于同一个Form实例，点击主Submit就能一次性收集所有数据。

修改后的代码示例：

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

const { Item: FormItem } = Form;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const onFinish = (values) => {
  console.log('Success:', values);
  // 这里可以获取包括动态字段在内的所有表单数据
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

export default function MainForm() {
  return (
    <Form {...layout} name="basic" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed}>
      <FormItem label="Username" name="username" rules={[{ required: true, message: "Please input your username!" }]}>
        <Input />
      </FormItem>

      {/* 用Form.List实现动态添加字段 */}
      <Form.List name="dynamicFields">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <FormItem
                  {...restField}
                  name={[name, 'fieldValue']}
                  rules={[{ required: true, message: 'Please input field value!' }]}
                >
                  <Input placeholder="Enter field content" />
                </FormItem>
                <Button onClick={() => remove(name)}>Remove</Button>
              </Space>
            ))}
            <FormItem>
              <Button type="dashed" onClick={() => add()} block>
                Add field
              </Button>
            </FormItem>
          </>
        )}
      </Form.List>

      <FormItem {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Main Submit
        </Button>
      </FormItem>
    </Form>
  );
}

方案二：将主Form实例传递给独立的Demo组件 #

如果Demo组件需要保持独立，你可以把主Form的实例传递给它，让Demo里的字段注册到主Form中，同时移除Demo内的Submit按钮。

主Form代码修改： #

// 创建主Form实例
const [form] = Form.useForm();

// 传递实例给Demo组件
<Demo form={form} />

// 主Form绑定该实例
<Form {...layout} form={form} name="basic" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed}>

Demo组件修改： #

// 接收主Form实例，不再创建独立Form
export default function Demo({ form }) {
  return (
    <Form.List name="dynamicFields" form={form}>
      {(fields, { add, remove }) => (
        <>
          {fields.map(({ key, name, ...restField }) => (
            <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
              <FormItem
                {...restField}
                name={[name, 'fieldValue']}
                rules={[{ required: true, message: 'Please input field value!' }]}
              >
                <Input placeholder="Enter field content" />
              </FormItem>
              <Button onClick={() => remove(name)}>Remove</Button>
            </Space>
          ))}
          <FormItem>
            <Button type="dashed" onClick={() => add()} block>
              Add field
            </Button>
          </FormItem>
        </>
      )}
    </Form.List>
  );
}

核心逻辑说明 #

Ant Design的Form是通过同一个form实例统一管理所有字段的状态和数据的，只有注册到同一实例下的字段，才会在onFinish回调中被完整收集。之前的问题正是因为Demo组件有独立的Form实例，和主Form完全隔离，才需要单独提交。按照上述方法整合后，所有字段都归属于主Form实例，点击「Main Submit」就能一次性保存所有数据。

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