如何在状态中存储多个反应表单数据答案

【问题标题】：How to store multiple react form data in state如何在状态中存储多个反应表单数据
【发布时间】：2019-01-04 15:29:45
【问题描述】：

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

当用户返回时，我可以选择检查用户已经完成的字段/表单的数量，并使用保存的数据呈现它们。

但是，这显然行不通。非常感谢任何改进我的代码并使其更高效的方法。

谢谢

【问题讨论】：

运行这段代码会发生什么？
value 在handleMainInputChange 中的定义在哪里？
另外，不知道为什么您在输入字段中有 both 占位符和值。您应该将占位符设置为以前的值或默认值 - 这样它是可编辑的，如果用户更新该字段，您可以获得新值。
我忘记添加该值，即使它在我的代码中 - 必须清理它（console.log 语句！）
感谢占位符的提示目前，当我运行代码时，单击添加表单，它会呈现表单，但会继续到下一页。继续下一页的调用仅在 handleSubmit 方法上。此外，由于表单是多个，我如何获取密钥并在 handleMainInputChange 中使用该特定密钥。

标签： javascript reactjs forms state

【解决方案1】：

目前，当我运行代码时，单击添加表单时，它会呈现表格，但继续到下一页。来电继续下一个 page 仅在 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: {},
  }
};

从长远来看，可能会使设置和访问更容易。

【讨论】：