在React中使用Ant Design Form时如何获取Form.Item内Table的对应值？

问题原因 #

Ant Design Form 只会自动收集Form.Item嵌套的标准表单控件（如Input、Select等）的值，Table组件本身不属于表单输入控件，没有内置value属性和值变更的onChange通知逻辑，因此Form无法感知并收集它对应的字段值，所以返回undefined。

可行解决方案 #

方案1：通过隐藏表单控件同步Table数据源（推荐） #

如果需要让Table的数据源完全被Form接管，可在同个Form.Item内新增隐藏的Input控件，用来承载Table的数据源，Form会自动收集该Input的值：

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

const Demo = () => {
  // 若Table数据可编辑，用state维护数据源
  const [items, setItems] = useState([
    {
      job: 'Engineer',
      age: 20
    },
    {
      job: 'Accountant',
      age: 24
    }
  ]);
  const [form] = Form.useForm();

  const onCreate = (values) => {
    console.log(values); // 这里jobs字段就能拿到完整的items数据
  }

  // 示例：Table数据修改后同步到Form字段
  const updateTableData = (newData) => {
    setItems(newData);
    form.setFieldValue('jobs', newData);
  }

  return (
    <Form 
      form={form}
      layout='vertical' 
      onFinish={onCreate}
      // 静态数据也可以直接在initialValues里初始化jobs的值，无需额外维护state也能拿到
      initialValues={{ jobs: items }}
    >
      <Form.Item name='jobs' label="职位列表">
        {/* 隐藏的Input用来存值，Form会自动收集它的value */}
        <Input type="hidden" />
        <Table dataSource={items} rowKey="job" />
      </Form.Item>
      <Form.Item>
        <button type="submit">提交</button>
      </Form.Item>
    </Form>
  )
}

方案2：提交时手动合并Table数据源 #

如果Table数据固定不需要动态修改，可直接在提交回调里手动把数据源合并到Form返回值中，实现更简单：

import { Form, Table } from 'antd';

const Demo = () => {
  const items = [
    { job: 'Engineer', age: 20 },
    { job: 'Accountant', age: 24 }
  ]

  const onCreate = (values) => {
    // 手动把items赋值给jobs字段
    const submitValues = { ...values, jobs: items };
    console.log(submitValues);
  }

  return (
    <Form layout='vertical' onFinish={onCreate}>
      {/* 不需要加name属性，无需Form自动收集 */}
      <Form.Item label="职位列表">
        <Table dataSource={items} rowKey="job" />
      </Form.Item>
      <Form.Item>
        <button type="submit">提交</button>
      </Form.Item>
    </Form>
  )
}

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