javascript - 从 setTimeout 调用 setState 会导致文本字段光标意外跳转

Question

在此示例中向输入字段添加几次击键，然后将插入符号放在文本中的某个位置并添加另一个击键后，插入符号将跳转到输入字段的末尾，而不是保留其位置。当setState呼叫不在 内时，不会发生这种情况setTimeout。为什么异步setState会导致这些问题？setState有没有办法在异步调用的同时获得所需的行为？

class Hello extends React.Component {
 constructor(props) {
    super(props);
    this.state = {value: ""};
    this.handleState = this.handleState.bind(this);
  }

  handleState(event) {
    const value = event.target.value;
    setTimeout(() => {
        this.setState({value: value});
    }, 10);
  }

  render() {
    return <input
    value={this.state.value}
    onChange={this.handleState} />;
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

标签： javascriptreactjssettimeoutsetstate