### Ant Design `Form.List` 组件概述 `Form.List` 是用于动态管理表单项数量的组件，适用于需要增删表单域的情况。此功能对于创建可变长度的数据输入非常有用[^1]。 ```jsx import React from 'react'; import { Form, Input, Button } from 'antd'; const MyForm = () => { const onFinish = values => { console.log('Received values of form:', values); }; return ( <Form name="dynamic_form_item" onFinish={onFinish}> <Form.List name="users"> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, fieldKey, ...restField }) => ( <div key={key} style={{ display: 'flex', marginBottom: 8 }}> <Form.Item {...restField} name={[name, 'firstName']} rules={[{ required: true, message: 'Missing first name' }]} > <Input placeholder="First Name" /> </Form.Item> <Form.Item {...restField} name={[name, 'lastName']} rules={[{ required: true, message: 'Missing last name' }]} > <Input placeholder="Last Name" /> </Form.Item> <Button type="link" onClick={() => remove(name)}> Delete </Button> </div> ))} <Button type="dashed" onClick={() => add()} block icon="plus"> Add user </Button> </> )} </Form.List> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ``` 上述代码展示了如何利用 `Form.List` 来实现用户列表的动态添加与删除操作。通过点击按钮可以增加新的用户条目，并且每个条目的右侧都有一个链接用来移除对应的记录[^1]。