React - 使用多个表单值更新状态答案

【问题标题】：React - Updating the state with multiple form valuesReact - 使用多个表单值更新状态
【发布时间】：2018-05-09 12:17:50
【问题描述】：

我是 React 的新手，我正在使用 MERN 堆栈（MongoDB、Express、React、Node）创建一个用于婚礼早餐桌计划的应用程序。

我创建了一个简单的表单组件来将表添加到计划（以及应用程序的数据库）。该表单有两个收集字段：

表名
餐桌容量

我一直在尝试在使用 Axios 提交时将这些 POST 到数据库，但是已经阅读了 React 中的表单更好的做法是有一个 onChange 处理程序，它在用户输入数据时更新状态，以及一个 onSubmit 处理程序，它从状态中获取数据并将其保存到数据库中。如下图。

class AddTableForm extends Component {
  render() {
    return (
      <section className="py-4">
        <div className="container">
          <h2>Add A Table</h2>
          <form action="/add-table" method="post" className="border p-3" onSubmit={this.props.addTableOnSubmit}>
            <label htmlFor="name" className="d-block">Table name</label>
            <input type="text" name="name" id="name" onChange={this.props.addTableOnChange} required />
            <label htmlFor="capacity" className="d-block">Table capacity</label>
            <input type="number" name="capacity" id="capacity"  onChange={this.props.addTableOnChange} required />
            <input type="submit" value="Add Table" name="submit" className="d-block mt-3" />
          </form>
        </div>
      </section>
    );
  }
}

export default AddTableForm;

我的问题是用这样的表格更新状态的最佳方法是什么？表单中的数据应该更新一个名为 tabledata 的状态对象，其形式为：

this.state = {
  tabledata: [
    {
      name: 'Table One',
      capacity: 5,
    },
    {
      name: 'Table Two',
      capacity: 7,
    }
  ]
}

如果我在更改时更新状态，我觉得在处理数据不完整的对象时会遇到很多问题。在这种情况下，我是否有可能和/或更好地处理提交的所有内容？

【问题讨论】：

你是否已经从 React 团队检查过这个文档：reactjs.org/docs/forms.html
是的，我已经读过了，谢谢。我认为因为我将两个表单值都存储在状态内的单个对象中，所以它变得比他们在文档中给出的示例更复杂。例如，如果用户在给出名称之前完成了我表单上的容量字段，我怎么知道要更新哪个对象？显然，第一次 onChange 被触发时，我只会创建一个新对象，但第二次我肯定应该更新现有对象（如果有的话）？

标签： reactjs

【解决方案1】：

上面显示的 state 对象和 onChange 和 OnSubmit 方法是我项目中父组件的一部分，并通过 props 传递下来。当用户开始与添加表表单交互时，我试图更新一个状态对象，该对象包含所有餐桌的数据。

我最终决定，将状态操作分为两个阶段：

AddTableForm 有一个状态
所有表的父组件中的另一个状态

当用户与表单交互时，AddTableForm 组件中的 onChange 被触发并为该特定表单建立状态。当用户提交表单时，onSubmit 处理程序会调用父组件中的一个函数，然后通过将这些新表数据添加到其中来更新所有表的状态。

这很好用，我真的希望这篇文章有一天能帮助其他人。

【讨论】：