Question

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

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

表名称
表容量

我一直试图将这些文章发布到提交时使用Axios进行数据库，但是已经阅读了更好的做法，使用React中的表单来创建一个onChange处理程序，在用户输入数据时更新状态，以及onSubmit处理程序从状态获取数据并将其持久保存到数据库。如下图所示。

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

为AddTableForm
所有Tables

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

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

React - 使用多个表单值

1 个答案: