react动态增减表单项
时间: 2023-09-08 22:11:37 浏览: 58
可以使用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方法提交表单数据。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)