javascript - 在 React 中存储数据

Question

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

• 在状态中存储数据。但正如 React Docs 所描述的那样:

  "Only data which need to render may store in the state."

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

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

  "You may change state directly only in constructor."

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

Answer 1

我认为你想多了，坚持使用受控组件并通过状态管理表单数据。

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

这是因为表单元素在 React 中的工作方式与其他 DOM 元素略有不同，因为在 HTML 中，表单元素如 <input> , <textarea> , 和 <select> 自然地维护自己的状态并根据用户输入更新它。 See official forms docs .

并且 React 不会将其从您手中夺走。这意味着您可以像使用普通 JS 一样使用表单。

另外值得一提的是，在 React 世界中，这种让数据完全由 DOM 处理而不是使用 React 组件处理的方式被称为不受控制的组件。

实现

就这在实践中的表现而言，我可以想到两种方法，一种是使用 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对象:

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>
  );
}