在上述代码中，添加行功能已通过
Form.List 的 add 方法实现。具体来说，点击“添加”按钮时触发 onClick={() => add()} ，
Form.List 会自动生成新的
表单项并添加到 fields 数据源中，从而实现表格行的新增。以下是关键实现逻辑和使用说明：
核心实现原理
1
. Form.List 的参数解构
在
Form.List 的回调函数中，通过解构
获取 add 和 remove 方法：
jsx
{(fields, { add, remove }) => (
// 表格渲染逻辑
)}
- fields ：当前所有
表单项的数据源（对应 name="users" 的
表单字段值）。
- add() ：新增
表单项的方法，调用后会自动生成新的字段对象并添加到 fields 中。
- remove(index) ：删除指定索引
表单项的方法（示例中未直接使用，可按需添加删除按钮）。
2
. 添加按钮的事件绑定
按钮通过 onClick={() => add()} 触发新增操作，无需手动处理数据源更新，
Form.List 会自动同步
表单状态：
jsx
<Button type="dashed" onClick={() => add()}>
添加
</Button>
完整示例（含删除功能）
若需完善表格功能（如添加删除按钮），可参考以下代码：
jsx
import
React from '
react';
import {
Form, Table, Button } from '
antd';
const Editable
FormTable = () => {
const [
form] =
Form.use
Form();
// 表格列定义
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
render: (_, { name,
...rest }) => (
<
Form.Item
name={[name, 'name']}
rules={[{ required: true, message: '请输入姓名' }]}
>
<
input placeholder="姓名" />
</
Form.Item>
),
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
render: (_, { age,
...rest }) => (
<
Form.Item name={[age, 'age']}>
<
input placeholder="年龄" type="number" />
</
Form.Item>
),
},
{
title: '操作',
key: 'action',
render: (_, { key,
...rest }) => (
<
Form.Item>
<Button size="small" danger onClick={() => rest
.remove(key)}>
删除
</Button>
</
Form.Item>
),
},
];
return (
<
Form form={
form} layout="vertical">
<
Form.List name="users">
{(fields, { add, remove }) => (
<>
<Table
dataSource={fields}
columns={columns}
rowKey="key"
pagination={false}
components={{
body: {
cell: ({ children,
...props }) => (
<td {
...props}>
<div style={{ position: 'relative' }}>
{children}
<div style={{ height: 24 }}></div>
</div>
</td>
),
},
}}
/>
<Button type="dashed" onClick={() => add()} style={{ marginTop: 16 }}>
添加
</Button>
</>
)}
</
Form.List>
</
Form>
);
};
export default Editable
FormTable;
关键说明
1
. 数据源与
表单同步
Form.List 会自动将 fields 与
表单字段 name="users" 绑定，新增或删除行时无需手动调用
form.setFields
Value ，框架会自动处理状态更新。
2
. 行内删除功能
在“操作”列中，通过 rest
.remove(key) 实现删除指定行（ key 为
Form.List 生成的唯一标识）。
3
. 表单验证
每个
表单项通过
Form.Item 包裹输入框，并设置 rules 验证规则（如姓名
必填），提交
表单时会自动
校验所有行的数据。
如果需要更复杂的交互（如编辑状态切换、自定义输入组件），可参考上一轮回答中的 EditableCell 组件实现进阶功能。
本文探讨了如何在表单提交时，通过URL参数预填充Input并实现必填校验。遇到rules校验默认值为undefined的问题，通过设置initialValues属性解决了表单获取默认值的问题，确保了输入验证的正确性。
扫一扫
1410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
