### Form.List 的使用方法及其与 Table 的结合 #### 一、Form.List 的基本概念 `Form.List` 是 Ant Design 中用于动态增删表单项的一个组件。它允许开发者通过简单的配置来管理一组可变长度的输入项，适用于需要动态调整字段数量的场景[^1]。 其核心功能包括： - 动态增加或删除表单域。 - 自动生成唯一的 `key` 和索引以便于绑定数据。 - 提供对嵌套结构的支持，便于复杂表单的设计。 以下是 `Form.List` 的基础用法示例： ```jsx import React from 'react'; import { Form, Button, Input } from 'antd'; const MyComponent = () => { const [form] = Form.useForm(); return ( <Form form={form} onFinish={(values) => console.log(values)}> <Form.List name="users"> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, fieldKey }, index) => ( <div key={key}> <Form.Item {...field} label={`User ${index}`} required={false} > <Input placeholder="username" /> </Form.Item> <Button type="danger" onClick={() => remove(name)} block> Delete </Button> </div> ))} <Button type="dashed" onClick={() => add()} style={{ width: '60%' }}> Add Field </Button> </> )} </Form.List> <Button type="primary" htmlType="submit"> Submit </Button> </Form> ); }; export default MyComponent; ``` 上述代码展示了如何利用 `Form.List` 创建一个可以动态添加和移除用户的表单列表[^2]。 --- #### 二、Form.List 与 Table 的结合方式 当需要将 `Form.List` 嵌入到表格 (`Table`) 中时，可以通过以下思路实现： 1. **定义表单结构** 将 `Form.List` 定义为表格的数据源，并将其映射至每一行的内容。 2. **处理动态操作** 利用 `add` 方法向表单中新增记录；利用 `remove` 删除指定行对应的记录。 3. **校验逻辑** 配置每列中的 `Form.Item` 进行独立验证，确保提交前满足业务需求。 下面是一个完整的例子，展示如何将 `Form.List` 与 `Table` 联动起来： ```jsx import React from 'react'; import { Form, Button, Input, Table } from 'antd'; const EditableTable = () => { const [form] = Form.useForm(); const columns = [ { title: 'Name', dataIndex: ['name'], render: (_, record) => ( <Form.Item name={['name']} rules={[{ required: true, message: 'Please input a valid name!' }]} > <Input /> </Form.Item> ), }, { title: 'Age', dataIndex: ['age'], render: (_, record) => ( <Form.Item name={['age']} rules={[ { required: true, message: 'Please enter an age!', pattern: /^[0-9]+$/ }, ]} > <Input type="number" /> </Form.Item> ), }, { title: 'Action', render: (_, record) => ( <Button danger onClick={() => form.setFieldsValue({ users: form.getFieldValue('users').filter((item) => item.key !== record.key), }) } > Delete </Button> ), }, ]; return ( <Form form={form} layout="vertical" onFinish={(values) => console.log(values)}> <Form.List name="users"> {(fields, { add, remove }) => ( <> <Table dataSource={fields.map(({ key, ...restField }) => ({ key, ...restField.name }))} columns={columns} pagination={false} /> <Button type="dashed" onClick={() => add({})} style={{ marginBottom: 8 }}> Add user </Button> </> )} </Form.List> <Button type="primary" htmlType="submit"> Save Data </Button> </Form> ); }; export default EditableTable; ``` 在这个例子中，`Form.List` 管理着整个表格的核心数据流，而 `Table` 组件则负责渲染这些数据并提供交互界面。 --- #### 三、注意事项 由于 React 的虚拟 DOM 工作机制基于浅比较，在某些情况下可能会遇到状态未及时更新的问题。解决办法是在修改特定字段之前先清空原有数据再重新赋值新内容。例如： ```javascript let newData = [...oldData]; newData[index].value = newValue; // 修改目标对象属性 setData([]); // 清空旧数据触发强制刷新 setTimeout(() => setData(newData), 0); ``` 这种方法能够有效规避因深层嵌套引起的视图不同步现象。 --- ###