Question

我有一个页面，用户可以在其中提交表单。他们可以选择向页面添加新表单（相同表单类型的表单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]},
  ]
};

当用户返回时，这使我可以选择检查用户已完成的字段/表格的数量，并使用保存的数据进行渲染。

但是，这显然不起作用。任何改进我的代码并使之更有效的方法将不胜感激。

谢谢

Answer 1

当前，当我运行代码时，单击“添加表单”，它将呈现表格，但继续下一页。继续下一个通话页面仅在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: {},
  }
};

从长远来看，可以使设置和访问变得更容易。

如何在状态下存储多个反应表单数据

1 个答案: