React.js输入光标复位

如果我有以下反应组分：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)}/> 
    } 
}

现在可正常工作，编辑文本并不光标复位到输入端。如果我修改它使得在的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)}/> 
    } 
}

显然，解决方法是不叫setState同步 - 但我不明白为什么异步版本不能正常工作。在我的头，事件链如下：

用户添加字符到输入字段中，从ACD改变它来甲乙 CD
输入DOM节点的值改变为ABCD以反映这一
经过一段时间
setState称为 - 改变从ACD的反应成分的状态，以ABCD
一个render呼叫被触发 - 所述阵营版本比较算法将DOM节点值（ABCD），以值为this.state.value（ABCD）。它看到两者是相同的，因此不会触发重绘，并且光标被保留。

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

请任何人都可以解释为什么？

谢谢！

来源

2017-04-09 maambmb

可能的复制[在ReactJS，为什么\'的setState \'同步调用时不同的表现？（HTTP：//计算器。com/questions/28922275/in-reactjs-why-does-setstate-behave-different-when-called-synchronous） – maambmb

状态更改将始终触发新的render呼叫。之后，React自己决定重新渲染什么。但它会一直通过改变状态来触发。即使你做

this.setState({})

它会调用render方法。

来源

2017-04-09 12:03:06

肯定，但我的问题是为什么React选择重新呈现文本输入（导致光标重置）当setState被称为async vs sync时 – maambmb

对不起球员，发现重复的疑问，回答我的问题：

In ReactJS, why does `setState` behave differently when called synchronously?

我无法弄清楚如何标记我自己的问题为重复不幸的是:(

我的心智模式事件的顺序是错误的，显然在每个事件处理函数的末尾都会触发一个同步重新呈现，因此在 DOM更改之后渲染变为，但之前的反应状态已更改 - 导致重绘和光标复位

感谢所有

牛逼

来源

2017-04-09 12:30:41 maambmb

React.js输入光标复位

回答

相关问题