### 动态删除表单项的实现 在 Ant Design 的 `AForm` 表单中，动态添加和删除表单项的功能可以通过 `FieldArray` 或者 `form.list` 方法来实现。以下是一个完整的解决方案，展示如何为每一项添加删除图标，并实现点击图标删除对应项的功能。 #### 核心逻辑 1. 使用 `form.list` 获取当前表单字段的列表。 2. 遍历字段列表并为每个字段渲染一个 `Form.Item`。 3. 在每个 `Form.Item` 后面添加一个删除图标（如 `CloseCircleOutlined`），绑定点击事件以调用 `form.remove` 方法删除对应的字段。 4. 提供一个按钮用于新增字段，点击时调用 `form.append` 方法。 以下是代码示例： ```jsx import React from 'react'; import { Form, Input, Button, Space } from 'antd'; import { CloseCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'; const DynamicForm = () => { const [form] = Form.useForm(); return ( <Form form={form} layout="vertical"> <Form.List name="users"> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, fieldKey }, index) => ( <Space key={key} align="baseline" style={{ display: 'flex', marginBottom: 8 }}> <Form.Item name={[name, 'username']} fieldKey={[fieldKey, 'username']} rules={[{ required: true, message: '请输入用户名!' }]} label={`用户名 ${index + 1}`} > <Input placeholder="请输入用户名" /> </Form.Item> {fields.length > 1 && ( <CloseCircleOutlined onClick={() => { remove(name); }} style={{ color: 'red', cursor: 'pointer' }} /> )} </Space> ))} <Form.Item> <Button type="dashed" onClick={() => add()} block icon={<PlusCircleOutlined />}> 添加用户 </Button> </Form.Item> </> )} </Form.List> <Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> ); }; export default DynamicForm; ``` #### 说明 1. **`Form.List`**：用于管理动态表单项的列表[^1]。 2. **`add` 和 `remove`**：分别用于新增和删除表单项[^2]。 3. **`CloseCircleOutlined`**：作为删除图标的组件，绑定点击事件以调用 `remove` 方法[^3]。 4. **`fieldKey`**：确保每个字段有唯一的标识，避免重复渲染问题。 ### 注意事项 - 每个表单项需要有唯一的 `name` 和 `fieldKey`，以确保表单数据的正确性[^2]。 - 删除操作应判断当前表单项的数量，避免删除最后一个字段后无法提交表单[^3]。