Antd Form跨多组件嵌套时无法收集表单值的解决方法

Antd表单的表单项分散在嵌套子组件中时，核心问题是要让所有子组件的Form.Item共享同一个表单实例。以下是两种实用的解决方案：

方法一：使用表单上下文（Form.useFormContext） #

适合多层嵌套的组件结构，无需手动传递props，通过上下文自动共享表单实例。

主组件（SignupForm） #

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

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

  const handleSubmit = (values) => {
    console.log('表单提交值:', values);
    // 编写提交逻辑
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <PageComponent />
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default SignupForm;

子组件（PageComponent） #

import { Form, Input } from 'antd';

const PageComponent = () => {
  // 通过上下文获取主组件的表单实例
  const form = Form.useFormContext();

  return (
    <div>
      <Form.Item
        name="username"
        label="用户名"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="email"
        label="邮箱"
        rules={[{ required: true, type: 'email', message: '请输入正确邮箱格式' }]}
      >
        <Input />
      </Form.Item>
    </div>
  );
};

export default PageComponent;

方法二：手动传递表单实例作为props #

适合层级较浅的组件结构，直接将主组件的表单实例传给子组件绑定使用。

主组件（SignupForm） #

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

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

  const handleSubmit = (values) => {
    console.log('表单提交值:', values);
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      {/* 将表单实例传给子组件 */}
      <PageComponent form={form} />
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default SignupForm;

子组件（PageComponent） #

import { Form, Input } from 'antd';

const PageComponent = ({ form }) => {
  return (
    <div>
      <Form.Item
        name="username"
        label="用户名"
        rules={[{ required: true, message: '请输入用户名' }]}
        form={form} // 绑定传入的表单实例
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="email"
        label="邮箱"
        rules={[{ required: true, type: 'email', message: '请输入正确邮箱格式' }]}
        form={form}
      >
        <Input />
      </Form.Item>
    </div>
  );
};

export default PageComponent;

关键注意事项 #

• 所有需要收集值的Form.Item必须设置唯一的name属性，无name的表单项不会被表单实例收集。
• 禁止在子组件中单独创建新的Form.useForm()实例，必须与主组件共享同一个实例才能保证状态统一。
• 若存在多层嵌套的子组件（子组件内还有子组件），优先使用Form.useFormContext方案，避免多层props传递的冗余。

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