[英]How to store multiple react form data in state
我有一个页面,用户可以在其中提交表单。 他们可以选择向页面添加新表单(相同表单类型的表单2、3、4、5)。
我通过以下方式处理:
handleAddPastMainData() {
const pastMainData = this.state.mainData[0].pastMainData;
this.setState({
mainData: {
...this.state.mainData,
pastMainData: pastMainData.push([])
}
})
}
然后,我通过pastMainData进行映射以显示添加的表单。
我面临的挑战是处理程序用于保存数据,因为表格是嵌套的。
我当前的状态是这样的:
this.state = {
mainData: [
{pastMainData: []},
]
};
我的处理程序是:
handleMainInputChange = (event) => {
const name = event.target.name;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState(state => {
state.mainData[0].pastMainData[name] = value;
return state
})
};
我的应用程序中的示例表单输入字段为:
<Field
label="Main name"
id="pastMainName"
name="pastMainName"
placeholder="Super Awesome FName"
value={state.MainData[0].pastMainData.pastMainName}
onChange={handleMainInputChange}
/>
通过pastMainData映射时,我为每个表单分配一个键。
因此,用户可以选择添加以上字段输入中的5个以上并提交。
提交数据后,我希望状态看起来像这样:
this.state = {
mainData: [
{pastMainData: [[field1], [field2], [field3]},
]
};
当用户返回时,这使我可以选择检查用户已完成的字段/表格的数量,并使用保存的数据进行渲染。
但是,这显然行不通。 任何改进我的代码并使之更有效的方法将不胜感激。
谢谢
当前,当我运行代码时,在单击“添加表单”时,它将呈现该表单,但将继续下一页。 继续进入下一页的调用仅在handleSubmit方法上。
要阻止它继续进入下一页,您可能需要在该按钮上e.preventDefault()
。
“由于表单是多个,所以如何获取密钥并在handleMainInputChange中使用该特定密钥。”
将密钥添加到字段或窗体。 例如:
<Field
key={key}
label="Main name"
id="pastMainName"
name="pastMainName"
placeholder="Super Awesome FName"
value={state.MainData[0].pastMainData.pastMainName}
onChange={handleMainInputChange}
/>
而且您应该能够像访问任何数据属性一样访问它,如果没有,则可以将其作为参数传递给onChange
函数。
同样,也许为状态obj使用不同的数据结构会更容易:
this.state = {
forms: {
form1: {},
form2: {},
form3: {},
}
};
从长远来看,可能会使设置和访问变得更容易。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.