在 React 中存储数据

我实际上是 React 新手，无法选择在这种情况下存储数据的最佳方式是什么： 我有一个包含一些输入的表单，我需要在提交时对这些输入中的所有数据执行一些操作。 所有输入都存储在一个组件中。 所以，我只需要在提交时获取所有数据。现在我正在尝试选择存储这些数据的最佳方式。我看到有两种方法：

• 在状态中存储数据。但正如 React 文档所描述的：

  “只有需要渲染的数据才可以存储在状态中。”

  但我不需要这些数据来渲染，我只需要在提交时使用它。

• 存储为类变量。它看起来对我来说很好，因为当我 使用状态，我需要调用 setState()，它会触发渲染（我 不需要），或者 this.state.data = ....但是 React Docs 说：

  “您只能在构造函数中直接更改状态。”

那么，这些方法中哪一种更好，为什么？

我认为您想得太多了，只需坚持使用受控组件并通过状态管理表单数据即可。

但是，如果您确实不想使用受控组件，因为您不想调用 render 方法，那么您就不必这样做。

这是因为表单元素的工作方式与 React 中的其他 DOM 元素有点不同，因为在 HTML 中，表单元素如<input>, <textarea>, and <select> 自然维护自己的状态并根据用户输入更新它。请参阅官方表格文档 https://reactjs.org/docs/forms.html.

React 不会把它从你身边夺走。这意味着您可以像使用普通 JS 一样使用表单。

还值得一提的是，在 React 世界中，这种让数据纯粹由 DOM 处理而不是使用 React 组件处理的方式被称为不受控制的组件.

执行

至于实践中的情况，我可以想到两种方法，一种是with refs:

handleSubmit = (e) => {
  e.preventDefault();
  console.log(this.input.value); // whatever you typed into the input
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text" name="name" ref={input => this.input = input} />
      <input type="submit" value="submit" />
    </form>
  );
}

另一种方法是通过event object:

handleSubmit = (e) => {
  e.preventDefault();
  console.log(e.target.name.value); // whatever you typed into the input
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text" name="name" />
      <input type="submit" value="submit" />
    </form>
  );
}