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

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状态的标头的submit ，则它们都返回相同的值

谁能帮我解释一下？

谢谢

Answer 1

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