在 React 中存储数据

Question

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

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

“只有需要呈现的数据才能存储在状态中。”

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

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

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

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

原文由 Vanya Makhlinets 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

这是因为表单元素与 React 中 的其他 DOM 元素有点不同，因为在 HTML 中，表单元素例如 <input> ， <textarea> 和 <select> 维护自己的状态并根据用户输入更新它。 请参阅官方表格文档。

React 不会把它从你身边拿走。这意味着您可以像使用 vanilla 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>
  );
}

原文由 linasmnew 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于存储公式，我肯定会选择将数据存储在状态中，如果您查看 React 表单官方文档，他们会解释我认为您的情况。

据我所知，您将看到最多的标准是：

 class Form extends Component {
    constructor (props) {
    super(props)
    this.state = {
      name: '',
      surname: ''
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // send data from the actual state
  }

  handleChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }

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

看看我为你做的这个 JSFiddle ！并在发送输入时检查您的控制台。

原文由 Joan Albert 发布，翻译遵循 CC BY-SA 3.0 许可协议