Reactjs 使用异步onChange处理程序重置React.js输入游标

如果我有以下反应组件：

class Cmpt extends Component {
   setValue( e ) {
     this.setState({ value : e.target.value });
   }
   render() {
     return <input value={this.state.val} onChange={this.setValue.bind(this)}/>
   }
}

类Cmpt扩展组件{ 设定值（e）{ this.setState（{value:e.target.value}）； } render（）{ 返回 } } 现在，这项工作如预期的那样，编辑文本不会将光标重置到输入的末尾。如果我修改它，使setState以异步方式发生，则会发生光标重置：

class Cmpt extends Component {
   setValue( e ) {
     setTimeout( () =>
       this.setState({ value : e.target.value }) );
   }
   render() {
     return <input value={this.state.val} onChange={this.setValue.bind(this)}/>
   }
}

类Cmpt扩展组件{ 设定值（e）{ 设置超时（（）=> this.setState（{value:e.target.value}））； } render（）{ 返回 } } 显然，解决办法是不同步调用

setState

，但我不明白为什么异步版本不能正常工作。在我看来，一连串的事件如下：

用户向输入字段添加字符，将其从ACD更改为aBCD

输入DOM节点的值更改为ABCD以反映此情况

一段时间过去了

setState

被调用-将反应组件的状态从ACD更改为ABCD

触发了一个

render

调用-React diffing算法将DOM节点值（ABCD）与

this.state.value

（ABCD）的值进行比较。它会看到两者都是相同的，因此不会触发重画，并且会保留光标

很明显，我的心智模型是错误的，因为正在触发重画-导致光标重置

谁能解释一下原因吗

---

谢谢

状态更改将始终触发新的

render

调用。之后，React自己决定重新渲染什么。但它总是通过改变状态来触发。即使你这样做了

this.setState({})

---

它将调用

render

方法。

状态更改将始终触发新的

render

调用。之后，React自己决定重新渲染什么。但它总是通过改变状态来触发。即使你这样做了

this.setState({})

---

它将调用

render

方法。

抱歉，伙计们，找到了一个重复的问题，回答了我的问题：

很遗憾，我不知道如何将我自己的问题标记为重复问题：(

我对事件顺序的心理模型是错误的。显然，react会在每个事件处理程序的末尾触发同步重新渲染，因此在DOM更改之后调用render，但在react状态更改之前调用render，导致重新绘制和光标重设

谢谢大家

---

T

抱歉，伙计们，找到了一个重复的问题，回答了我的问题：

很遗憾，我不知道如何将我自己的问题标记为重复问题：(

我对事件顺序的心理模型是错误的。显然，react会在每个事件处理程序的末尾触发同步重新渲染，因此在DOM更改之后调用render，但在react状态更改之前调用render，导致重新绘制和光标重设

谢谢大家

---

T

当然，但我的问题是，为什么当setState被称为async vs Syncy时，React会选择重新呈现文本输入（导致光标重置），但我的问题是，当setState被称为async vs Syncy时，React会选择重新呈现文本输入（导致光标重置），因为setState可能重复