I have struggled for several hours today. However, I still cannot fix this problem. I'm now using React and Ant Design Form to post data, but I cannot get any data from Form.Item if I put Table there, is there any better solution?

Below is my code:

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

The onCreate function only prints jobs: undefined, but I would like to get items data, any idea?

I have struggled for several hours today. However, I still cannot fix this problem. I'm now using React and Ant Design Form to post data, but I cannot get any data from Form.Item if I put Table there, is there any better solution?

Below is my code:

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

The onCreate function only prints jobs: undefined, but I would like to get items data, any idea?

• javascript
• reactjs
• antd

2 Answers 2

After a nice sleep, I found an alternative to solve this question.

1. Create a form instance via Form.useForm()
2. Use form.setFieldsValue({ items: items})

With these two steps, we can easily pass any data into form when submit!

See simplified code below:

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

Below is my actual use of selectable Table and 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>
      </>
   )

I am not sure if this is possible, as the main purpose of the table ponent is to only render the provided data. But anyways check this doc. They have provided an option of adding a checkbox to the table. see if you can reverse engineer it to add text field