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

Share Improve this question Follow asked Sep 6, 2021 at 12:35 MatsuMatsu 33311 gold badge33 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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