在React项目开发中，动态渲染表单组件是非常常见的需求，比如用户点击添加按钮后，页面上新增一组相同的表单输入项，支持多次点击添加多组内容。实现这个功能的本质是借助React的状态管理，维护一个存储表单组件配置或数据的数组，每次点击按钮时更新这个数组，触发组件重新渲染。
核心实现思路
要实现按钮点击多次添加表单组件，核心逻辑可以拆解为三个部分：
- 定义一个状态变量，用来存储所有动态添加的表单组件的相关数据，通常是一个数组，每个数组元素对应一组表单的内容
- 给添加按钮绑定点击事件，点击时向状态数组中添加一个新的元素，触发组件重新渲染
- 遍历状态数组，根据数组中的每个元素渲染对应的表单组件，同时可以给每个表单组件添加删除按钮，支持移除对应的表单项
完整代码实现
基础版：动态添加简单输入框
首先实现一个最基础的版本，每次点击按钮新增一个文本输入框，同时支持删除对应的输入框。
import React, { useState } from 'react';
const DynamicForm = () => {
// 状态数组，每个元素是一个对象，包含输入框的唯一id和输入值
const [formList, setFormList] = useState([{ id: Date.now(), value: '' }]);
// 点击添加按钮的回调
const handleAdd = () => {
setFormList([
...formList,
{ id: Date.now(), value: '' }
]);
};
// 点击删除按钮的回调，根据id移除对应的表单项
const handleDelete = (id) => {
setFormList(formList.filter(item => item.id !== id));
};
// 输入框内容变化的回调
const handleInputChange = (id, e) => {
const newList = formList.map(item => {
if (item.id === id) {
return { ...item, value: e.target.value };
}
return item;
});
setFormList(newList);
};
// 提交表单时收集所有数据
const handleSubmit = () => {
const allValues = formList.map(item => item.value);
console.log('所有表单值:', allValues);
};
return (
<div className="dynamic-form">
<h3>动态添加表单组件示例</h3>
<button type="button" onClick={handleAdd}>添加表单项</button>
<div className="form-list">
{formList.map(item => (
<div key={item.id} className="form-item">
<input
type="text"
value={item.value}
onChange={(e) => handleInputChange(item.id, e)}
placeholder="请输入内容"
/>
<button type="button" onClick={() => handleDelete(item.id)}>删除</button>
</div>
))}
</div>
<button type="button" onClick={handleSubmit}>提交表单</button>
</div>
);
};
export default DynamicForm;
进阶版：动态添加复杂表单组
如果需要动态添加的是一组包含多个输入项的表单，比如同时包含姓名、年龄、邮箱的表单组，只需要调整状态数组的元素结构即可。
import React, { useState } from 'react';
const DynamicFormGroup = () => {
// 状态数组，每个元素是一个包含多个字段的表单组
const [formGroups, setFormGroups] = useState([
{ id: Date.now(), name: '', age: '', email: '' }
]);
// 添加表单组
const handleAddGroup = () => {
setFormGroups([
...formGroups,
{ id: Date.now(), name: '', age: '', email: '' }
]);
};
// 删除表单组
const handleDeleteGroup = (id) => {
setFormGroups(formGroups.filter(item => item.id !== id));
};
// 表单组输入项变化处理
const handleGroupChange = (id, field, e) => {
const newGroups = formGroups.map(item => {
if (item.id === id) {
return { ...item, [field]: e.target.value };
}
return item;
});
setFormGroups(newGroups);
};
// 提交时收集所有表单组数据
const handleSubmitGroup = () => {
console.log('所有表单组数据:', formGroups);
};
return (
<div className="dynamic-form-group">
<h3>动态添加表单组示例</h3>
<button type="button" onClick={handleAddGroup}>添加表单组</button>
<div className="group-list">
{formGroups.map(group => (
<div key={group.id} className="form-group">
<div className="group-item">
<label>姓名:</label>
<input
type="text"
value={group.name}
onChange={(e) => handleGroupChange(group.id, 'name', e)}
/>
</div>
<div className="group-item">
<label>年龄:</label>
<input
type="number"
value={group.age}
onChange={(e) => handleGroupChange(group.id, 'age', e)}
/>
</div>
<div className="group-item">
<label>邮箱:</label>
<input
type="email"
value={group.email}
onChange={(e) => handleGroupChange(group.id, 'email', e)}
/>
</div>
<button type="button" onClick={() => handleDeleteGroup(group.id)}>删除该组</button>
</div>
))}
</div>
<button type="button" onClick={handleSubmitGroup}>提交所有表单组</button>
</div>
);
};
export default DynamicFormGroup;
实现注意事项
- 每个动态添加的组件都需要设置唯一的
key属性，这里使用Date.now()生成唯一id，实际项目中可以使用更可靠的唯一id生成方法，比如uuid库 - 修改状态数组时，不要直接修改原数组，要使用数组的扩展运算符或者
map、filter等方法返回新的数组，保证React能正确检测到状态变化触发重新渲染 - 如果动态表单组件需要支持表单验证，可以在状态中额外添加验证相关的字段，或者在提交时遍历状态数组进行统一校验
- 当动态添加的表单组件数量较多时，可以考虑做虚拟滚动优化，避免大量DOM节点导致的性能问题
常见问题解答
为什么点击添加按钮后没有新的组件出现？
大概率是状态更新逻辑有问题，比如直接修改了原状态数组，没有返回新的数组，导致React没有检测到状态变化。可以检查添加回调中是否使用了正确的状态更新方式，确保每次更新都返回新的数组。
如何获取所有动态添加的表单数据？
只需要遍历存储表单数据的状态数组，提取需要的内容即可。如果是简单输入框，直接提取每个元素的value字段；如果是复杂表单组，直接拿到整个状态数组就是所有表单的数据集合。