Вызов setState из setTimeout вызывает неожиданный скачок курсора в текстовом поле. - PullRequest
Новая
       12

Вызов setState из setTimeout вызывает неожиданный скачок курсора в текстовом поле.

0 голосов
/ 30 ноября 2018

После добавления нескольких нажатий клавиш в поле ввода в этом семпле , затем размещения каретки где-нибудь в тексте и добавления еще одного нажатия клавиши, каретка будет переходить в конец поля ввода, а не сохранять егопозиция.Этого не происходит, если вызов 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')
);
...