Ant设计如何处理从底层数据结构访问值的Form.List

Question

我试图从Ant Design中掌握Form.List。我已经发现它包含FieldData[]，其中每个元素都包含name, key, fieldKey，但我不知道如何使用它来访问它的值。我试图基于在另一个问题中发现的代码示例来解决以下两个用例：

• 将所有年龄相加为所有用户总年龄的页脚
• 添加年龄和名称的排序器，也就是编号和字符串列

从上面的codesandbox示例中浓缩出来，我有以下Form和Table代码，留下了我无法解决的两个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;

Answer 1

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

• 您的<表单列表>具有名称属性CCD_ 4
• 当映射fields: Field[](在本例中称为users(时，ant将每个字段的索引映射到name参数

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

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