Form.Item中包含antd Table时如何获取值？答案

【问题标题】：How to get values when include antd Table in Form.Item?Form.Item中包含antd Table时如何获取值？
【发布时间】：2021-09-06 12:35:30
【问题描述】：

我今天挣扎了好几个小时。但是，我仍然无法解决这个问题。我现在正在使用 React 和 Ant Design Form 发布数据，但是如果我将 Table 放在那里，我无法从 Form.Item 中获取任何数据，有没有更好的解决方案？

下面是我的代码：

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

 const onCreate = (values) => {
        console.log(values);
 }

 return (
    <Form layout='vertical' onFinish={onCreate}>
      <Form.Item name='jobs'>
        <Table dataSource={items} />
      </Form.Item>
    </Form>
 )

onCreate 函数只打印作业：未定义，但我想获取项目数据，知道吗？

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

我不确定这是否可行，因为表格组件的主要目的是仅呈现提供的数据。但无论如何检查this doc。他们提供了向表格添加复选框的选项。看看你是否可以对其进行逆向工程以添加文本字段

【讨论】：

我也不确定这种用途。但是，我尝试使用作为替代，以便在提交时将数据传递到表单中，但它仍然无法按预期工作，因为我还没有找到一种无需触发状态更新的方法在组件中使用 onChange 属性。

【解决方案2】：

睡了一觉之后，我找到了解决这个问题的替代方法。

通过 Form.useForm() 创建表单实例
使用 form.setFieldsValue({ items: items})

通过这两个步骤，我们可以在提交时轻松将任何数据传递到表单中！

参见下面的简化代码：

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

 form.setFieldsValue({ items: items});
 const onCreate = (values) => {
        console.log(values);
 }

 const [form] = Form.useForm();
 
 

 return (
    <Form form={form} layout='vertical' onFinish={onCreate}>
      <Form.Item name='items'>
        <Table dataSource={items} />
      </Form.Item>
    </Form>
 )

下面是我对可选表格和表格的实际使用。

import React, { useState, useEffect, useCallback } from 'react';
import Form from 'antd/lib/form';
import Table from 'antd/lib/table';
import api from 'api.js';

const FormTable = (props) => {
  const [form] = Form.useForm();
  const [jobs, setJobs] = useState([]);
  const [filteredJobs, setFilteredJobs] = useState([]);
  
  const [select, setSelect] = useState({
      selectedRowKey: jobs.filter((item) => item.chosen).map((item) => item)
  })

  const rowSelection = {
     selectedRowKey,
     onChange: (selectedRowKey, selectedRows) => {
         setSelect({
            ...select,
            selectedRowKey: selectedRowKey,
         });
         const selectedJobs = [];
         selectedRows.map((job) => {
             selectedJobs.push({...job});
         });
         setFilteredJobs(selectedJobs);
         form.setFieldsValue({ jobs: selectedRows});
     },
   };

  const onGetJobs = useCallback(() => {
      api.getJobs(id)
          .then((response) => {
              const data = response.data.results;
              const jobsData = [];
              data.map((job) => {
                  jobsData.push({
                      ...job,
                  });
              });
              setJobs(jobsData);
        })
          .catch(() => {});
   }, []);

   return (
      <>
        <Form form={form}>
           <Form.Item name="jobs">
              <Table dataSource={filteredJobs} />
           </Form.Item>
        </Form>
      </>
   )

【讨论】：