如何通过getFieldValue()获取主、子两个表单的提交数据？

看起来你遇到的核心问题是主表单和子表单没有共享同一个Form实例，导致主表单的getFieldValue()只能获取到自身的表单数据，子表单的数据存在独立的Form实例里，自然拿不到。下面给你一步步的解决方案：

1. 统一Form实例，让主/子表单共享 #

首先在主表单组件中用Form.useForm()创建唯一的Form实例，然后把这个实例传递给子表单，确保两者使用同一个实例注册表单字段。

主表单组件修改示例 #

import { Form, Input, Button } from 'antd';
import SubForm from './SubForm';

const MainForm = () => {
  // 创建共享的Form实例
  const [form] = Form.useForm();

  const save = () => {
    // 直接调用form实例的getFieldValue获取所有数据
    console.log(form.getFieldValue());
  };

  const onFinish = (values) => {
    console.log('Success:', values);
  };

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

  return (
    <div>
      <Form
        name="main"
        form={form} // 绑定共享实例
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password />
        </Form.Item>
      </Form>
      {/* 把共享的form实例传给子表单 */}
      <SubForm form={form} />
      <button onClick={save}>save</button>
    </div>
  );
};

export default MainForm;

2. 修改子表单，使用传入的Form实例 #

子表单不需要自己创建新的Form实例，直接使用主表单传递过来的form属性，这样子表单的所有字段都会注册到主表单的实例中。

子表单组件修改示例 #

import { Form, Input } from 'antd';

const SubForm = ({ form }) => {
  return (
    <Form form={form}> {/* 使用主表单传递的实例 */}
      <Form.Item
        label="Sub Username"
        name="subUsername" // 字段名要唯一，避免和主表单冲突
        rules={[{ required: true, message: "Please input sub username!" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Sub Email"
        name="subEmail"
        rules={[{ required: true, type: 'email', message: "Please input valid email!" }]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default SubForm;

为什么原来的代码不行？ #

你之前的子表单应该是创建了独立的Form实例（如果子表单里用了自己的Form.useForm()或者没指定form属性），这会导致主表单和子表单的字段分别存储在两个不同的实例中。主表单的getFieldValue()只能访问自身实例里的字段，所以获取不到子表单的数据。

额外优化建议 #

• 推荐使用Form.useForm()返回的实例来操作表单，比ref更可靠也更符合Ant Design的设计规范。
• 如果子表单需要独立的校验逻辑，可以在子表单的Form.Item中单独设置规则，不影响主表单的整体校验。

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