我有一个页面，用户可以在其中提交表单。他们可以选择向页面添加新表单（相同表单类型的表单 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}
/>
并且您应该能够像访问任何数据属性一样访问它，如果没有，您可以将它作为 aa 参数传递给onChange函数。
此外，也许为您的状态 obj 使用不同的数据结构会更容易：
this.state = {
forms: {
form1: {},
form2: {},
form3: {},
}
};
从长远来看，可能会使设置和访问更容易。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句