我实际上是 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."
那么,这些方法中哪种更好,为什么?
最佳答案
我认为你想多了,坚持使用受控组件并通过状态管理表单数据。
但是,如果您真的不想使用受控组件,因为您不想调用 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>
);
}
关于javascript - 在 React 中存储数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48356854/