为什么在从事件处理程序分配状态时需要设置组件的值?

Question

我是新手，只是按照一些教程，我找不到答案

给定组件中的状态input和submit，这两个输入给了我相同的结果来更改state.submit

<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>

<input onChange = {this.handleChange.bind(this)}/>

如果handleChange函数已经设置了给定事件的状态，为什么我仍然需要设置value = {this.state.input}？

以下示例处理提交的值

handleChange(e){
this.setState({
input: e.target.value,
})
}
handleSubmit(e) {
e.preventDefault();
this.setState((state)=>({
submit: state.input
}));
}

如果我返回一个使用handleSubmit更改带有submit状态的标题的表单，则它们都返回相同的值

谁能帮我解释一下？

谢谢

Answer 1

React已经控制了渲染 DOM 元素，每个 html 元素都将与组件状态中的值绑定。 当值发生变化时，React 会重新渲染组件。这意味着 setState 将再次触发渲染组件。就事件处理程序而言，它只是调用处理程序，与更新状态无关。我们必须在调用 onChange 处理程序时更新状态。