antd Table in Form.Item 如何获取值？

Question

我今天挣扎了几个小时。但是，我仍然无法解决这个问题。我现在正在使用 React 和 Ant Design Form 来处理 post 数据，但是如果我把 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 函数仅打印作业：未定义，但我想获取项目数据，知道吗？

Answer 1

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

Answer 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>
 )

下面是我对selectableTable和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>
      </>
   )

antd Table in Form.Item 如何获取值？

How to get values when include antd Table in Form.Item?

javascript

reactjs

antd