### 获取 `Form.List` 组件中表单项值的方法 在 Ant Design 的 `Form.List` 中，获取表单项的值主要依赖于 `Form.Item` 和 `useForm` 钩子函数。为了有效地管理和访问这些值，通常会结合 `form.getFieldsValue()` 方法来提取整个表单的数据。 当涉及到动态增加或减少表单项时，可以通过 `field.add()` 和 `field.remove(index)` 来控制列表内的项目数量[^1]。具体来说： - **添加新条目**：调用 `field.add()` 函数可以在当前列表基础上追加新的空白条目。 - **移除指定条目**：利用 `field.remove(index)` 函数并传入要删除项目的索引来完成此操作。 对于获取特定位置上的表单项数据，则可以直接使用 `form.getFieldValue('path.to.item')` 或者批量读取多个字段通过 `form.getFieldsValue([paths])` 实现[^3]。 下面是一个简单的例子展示如何获取和处理来自 `Form.List` 的输入值： ```jsx import React from 'react'; import { Form, Input, Button } from 'antd'; const Demo = () => { const [form] = Form.useForm(); const onFinish = values => { console.log(values); }; return ( <Form form={form} name="dynamic_form_item" onFinish={onFinish}> <Form.List name={['users']}> {(fields, { add, remove }) => ( <> {fields.map(({ key, name }, index) => ( <div key={key} style={{ marginBottom: 8 }}> <Form.Item> <Input placeholder={`User ${index}`} /> </Form.Item> <Button type="link" onClick={() => remove(name)}> Remove </Button> </div> ))} <Button block onClick={() => add()} style={{ marginTop: 16 }}> Add field </Button> </> )} </Form.List> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; export default Demo; ``` 在这个案例里，每当点击 "Add field" 按钮就会向 `users` 数组内新增一条记录；而点击对应的 “Remove” 按钮将会把相应的用户信息从数组中剔除掉。提交按钮用于收集所有已填充的信息，并打印到控制台供进一步处理[^4]。