Ant Design 如何处理 Form.List 从底层数据结构访问值？答案

【问题标题】：Ant Design how to handle Form.List accessing values from underlaying data structure?Ant Design 如何处理 Form.List 从底层数据结构访问值？
【发布时间】：2020-04-23 07:30:09
【问题描述】：

我试图掌握Form.List from Ant Design。我已经发现它包含FieldData[]，其中每个元素都包含name, key, fieldKey，但我不知道如何使用它来访问它的值。我尝试基于code sample I found in another question解决以下两个用例：

页脚将所有年龄相加为所有用户的总年龄
为年龄和姓名（也就是数字和字符串列）添加排序器

从上面的codesandbox 示例中浓缩我有以下表格和表格代码，留下两个我无法解决的 TODO。你能帮帮我吗？

如果一般来说，您对 Form.List 有一定的了解，这也会有很大帮助吗？例如解释为什么我需要它用于动态表单以及它在内部和组件中做了什么？

任何帮助将不胜感激，非常感谢。

import { Button, Form, Row, notification, Table, InputNumber } from "antd";
import React, { useState } from "react";
import { useForm } from "antd/lib/form/util";

const TestForm: React.FC = () => {
 const [data, setData] = useState({ users: [] });
 const [form] = useForm();
 const [editingIndex, setEditingIndex] = useState<number | undefined>(
   undefined
   );

 const onFinish = (values: any) => {
   notification.success({
       message: "Submit",
       description: `Received values of form: ${JSON.stringify(values)}`
   });
   setData(values);
   };

 return (
  <Form
  form={form}
  name="dynamic_form_item"
  onFinish={onFinish}
  initialValues={data}
  >
   <Form.List name="users">
    {(users, { add, remove }) => (
     <Table
      dataSource={users}
      pagination={false}
      footer={fields => {
       // TODO calculate age sum from fields
       return (
           <Button>Add User</Button>
       );
      }}
      >
       <Table.Column
           dataIndex={"age"}
           title={"Age"}
           width={125}
           sorter={() => {
             // TODO build something to sort here sorter: (a, b) => a.weight - b.weight,
             return 0;
           }}
           render={(value, row, index) => {
            return (
             <EditableFormItem
                 name={[index, "age"]}
                 editing={index === editingIndex}
                 className={"ant-form-item-no-bottom-margin"}
                 >
                 <InputNumber placeholder="age" min={0} max={150} />
             </EditableFormItem>
            );
           }}
       />
      </Table>
     )}
    </Form.List>
   </Form>
  )};

export default TestForm;

【问题讨论】：

标签： reactjs typescript forms antd

【解决方案1】：

诀窍是使用整个NamePath 来访问字段的值。

您的<Form.List> 具有名称属性"users"。
当您映射fields: Field[]（在您的情况下称为users）时，ant 将每个字段的索引映射到name 参数。

将此信息与字段的实际输入名称相结合，您将获得字段NamePath 以通过form.getFieldValue() 访问表单条目的值：

form.getFieldValue(["users", name, "age"])

【讨论】：