Ant Design 动态表单组件实战指南
Ant Design（简称 Antd）是一套企业级 UI 设计语言和 React 组件库，其中的动态表单组件在构建复杂表单场景时非常有用。动态表单允许用户根据需求动态地添加、删除或修改表单项，适用于需要灵活输入的场景，如动态添加商品信息、用户输入多条地址等。
以下是一份围绕 Ant Design 动态表单组件的实战指南，帮助开发者快速上手并实现动态表单功能。
一、核心概念
1. 动态表单是什么？
动态表单的核心是表单项的增删改查，即用户可以根据需要动态调整表单的内容。例如：
- 添加新的输入项（如新增一行商品信息）。
- 删除不需要的输入项。
- 修改现有输入项的值。
2. Ant Design 提供的工具
Ant Design 的 Form 组件结合 Form.List 可以轻松实现动态表单功能：
- Form：Antd 的表单容器，用于管理表单状态和校验。
- Form.List：专门用于处理动态表单项的工具，支持增删改操作。
二、实现步骤
1. 初始化项目
确保你已经安装了 React 和 Ant Design：
npx create-react-app dynamic-form
cd dynamic-form
npm install antd
2. 引入 Ant Design 样式
在 index.js 或 App.js 中引入 Ant Design 的样式：
import 'antd/dist/reset.css'; // Antd 样式（根据版本可能需要调整）
3. 创建动态表单
以下是一个完整的动态表单示例，用户可以动态添加和删除用户信息（如姓名和年龄）。
示例代码
```javascript
import React from 'react';
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
const DynamicForm = () => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('表单提交数据:', values);
};
return (
);
};
export default DynamicForm;
```
三、代码解析
1. Form.List 的作用
Form.List是 Antd 提供的用于管理动态表单项的工具。- 它通过
fields属性提供当前表单项的数组，每个表单项包含key、name和fieldKey等信息。 - 提供了
add和remove方法，用于动态添加和删除表单项。
2. 动态表单项的结构
每个动态表单项是一个 Space 容器，包含：
- 两个 Form.Item，分别用于输入姓名和年龄。
- 一个删除按钮，点击后调用 remove 方法删除对应的表单项。
3. 添加表单项
- 点击 "添加用户" 按钮时，调用
add方法，向表单项数组中添加一个新的表单项。
4. 表单提交
- 点击 "提交" 按钮时，触发
onFinish回调，打印表单数据。
四、表单数据格式
提交后的表单数据格式如下：
{
"users": [
{ "name": "张三", "age": "25" },
{ "name": "李四", "age": "30" }
]
}
五、进阶功能
1. 默认值
可以通过 Form 的 initialValues 属性设置默认值：
<Form
form={form}
name="dynamic_form"
onFinish={onFinish}
initialValues={{
users: [{ name: '张三', age: '25' }]
}}
>
2. 校验规则
可以为每个表单项设置校验规则，例如年龄必须是数字：
<Form.Item
{...restField}
name={[name, 'age']}
rules={[
{ required: true, message: '请输入年龄' },
{ pattern: /^\d+$/, message: '年龄必须是数字' }
]}
>
<Input placeholder="年龄" />
</Form.Item>
3. 动态字段名
如果表单项字段名不固定，可以通过变量动态生成字段名。
六、常见问题
1. 表单项无法删除？
确保 remove 方法正确绑定到删除按钮，并且 fieldKey 。
2. 表单校验不通过？
检查每个 Form.Item 的 rules 属性，确保校验规则正确。
3. 表单数据格式不符合预期？
检查 Form.List 的 name 属性，确保与提交数据的结构一致。
通过 Ant Design 的 Form 和 Form.List 组件，可以轻松实现动态表单功能。核心步骤包括：
1. 使用 Form.List 管理动态表单项。
2. 使用 add 和 remove 方法实现增删操作。
3. 配置校验规则和默认值。
动态表单适用于需要灵活输入的场景，如用户信息录入、商品管理、问卷调查等。掌握这一技术可以显著提升开发效率，同时提升用户体验。
希望这份实战指南能帮助你快速上手 Ant Design 动态表单组件！
（本文来源：nzw6.com）
