我实际上是 React 的新手，无法选择在这样的情况下存储数据的最佳方式是什么：我有一个包含一些输入的表单，我需要对来自这些输入的所有数据执行一些操作提交。所有输入都存储在一个组件中。所以，我只需要在提交时获取所有数据。现在我正在尝试选择存储这些数据的最佳方式。我看到两种方式：
在状态中存储数据。但正如 React Docs 描述的那样：
“只有需要渲染的数据才能存储在状态中。”
但是我不需要这些数据进行渲染，我只需要在提交时使用它。
存储为类变量。这对我来说看起来不错，因为当我使用状态时，我需要调用 setState()，它会触发渲染（我不需要），或者 this.state.data = ....但是 React Docs 说：
“您只能在构造函数中直接更改状态。”
那么，这些方法中哪一种更好，为什么？
我认为您想多了，只是坚持使用受控组件并通过状态管理表单数据。
但是，如果您真的不想使用受控组件，因为您不想调用 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>
);
}
对于存储公式，我肯定会选择将数据存储在状态中，如果您查看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！并在发送输入时检查您的控制台。
这个问题刚刚出现在谷歌搜索中，所以我想我会推荐 formik https://github.com/jaredpalmer/formik
它非常健壮和高性能 + 如果您不想在您的 redux 商店中使用表单状态，它会很好