可以使用state来管理
表单项，通过setState
方法动态添加或删除
表单项。
示例代码：
```jsx
import React, { useState } from 'react';
function DynamicForm() {
const [formFields, setFormFields] = useState([{ name: '', age: '' }]); // 初始
表单项
const handleAddFields = () => {
setFormFields([...formFields, { name: '', age: '' }]); // 添加一
项空
表单项
};
const handleRemoveFields = (index) => {
const newFormFields = [...formFields];
newFormFields.splice(index, 1); // 删除指定位置的
表单项
setFormFields(newFormFields);
};
const handleChange = (index, event) => {
const { name, value } = event.target;
const newFormFields = [...formFields];
newFormFields[index][name] = value; // 修改指定位置的
表单项的指定属性值
setFormFields(newFormFields);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(formFields); // 提交
表单数据
};
return (
<form onSubmit={handleSubmit}>
{formFields.map((formField, index) => (
<div key={index}>
<
input type="text" name="name" value={formField.name} onChange={(event) => handleChange(index, event)} />
<
input type="text" name="age" value={formField.age} onChange={(event) => handleChange(index, event)} />
<button type="button" onClick={() => handleRemoveFields(index)}>删除</button>
</div>
))}
<button type="button" onClick={handleAddFields}>添加</button>
<button type="submit">提交</button>
</form>
);
}
export default DynamicForm;
```
在上面的示例中，我们使用useState来管理
表单项的状态。初始
表单项为一个包含name和age属性的对象数组。通过handleAddFields和handleRemoveFields
方法来动态添加和删除
表单项，这些
方法都是通过setState
方法更新
表单项状态来实现的。handleChange
方法用于修改
表单项中的属性值，这个
方法也是通过setState
方法更新
表单项状态来实现的。handleSubmit
方法用于提交
表单数据。最后，我们在render函数中使用map
方法遍历
表单项数组，动态渲染
表单项。每个
表单项都有一个删除按钮，点击按钮时会调用handleRemoveFields
方法删除对应的
表单项。添加按钮则会调用handleAddFields
方法添加一
项空
表单项。提交按钮则会调用handleSubmit
方法提交
表单数据。
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
