时间戳

首页 > 解决方案 > React - 使用多个表单值更新状态

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

问题描述

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

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

我一直在尝试在使用 Axios 提交时将这些发布到数据库，但是已经阅读了 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,
    }
  ]
}

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

标签： reactjs

解决方案

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

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

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

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

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

推荐阅读