在React中添加动态表单的按钮点击可以通过以下步骤实现:
以下是一个示例代码:
import React, { Component } from 'react';
class DynamicForm extends Component {
constructor(props) {
super(props);
this.state = {
formData: [], // 存储动态表单数据的数组
};
}
handleAddForm = () => {
// 点击按钮时添加新的表单数据
const newForm = {
// 表单数据的属性
};
this.setState(prevState => ({
formData: [...prevState.formData, newForm],
}));
};
handleChange = (index, event) => {
// 更新表单数据
const { name, value } = event.target;
this.setState(prevState => {
const formData = [...prevState.formData];
formData[index][name] = value;
return { formData };
});
};
render() {
const { formData } = this.state;
return (
<div>
{formData.map((form, index) => (
<div key={index}>
{/* 渲染动态表单的内容 */}
<input
type="text"
name="fieldName"
value={form.fieldName}
onChange={event => this.handleChange(index, event)}
/>
</div>
))}
<button onClick={this.handleAddForm}>添加表单</button>
</div>
);
}
}
export default DynamicForm;
在上述示例代码中,我们创建了一个DynamicForm组件,其中包含了一个formData数组用于存储动态表单的数据。在render方法中,我们使用map函数遍历formData数组,渲染动态表单的内容。在按钮的点击事件处理函数handleAddForm中,我们通过setState方法更新formData数组,添加新的表单数据。在表单的onChange事件处理函数handleChange中,我们通过setState方法更新formData数组,更新表单数据。
这样,当点击"添加表单"按钮时,会动态添加一个新的表单,并且可以通过输入框来更新表单数据。
领取专属 10元无门槛券
手把手带您无忧上云