Есть React контрол с тегом input
и дочерний контрол обрабатывающий введенное значение.
<div>{this.state.Inputed}</div>
<input
autoFocus
type="text"
value={this.state.Inputed}
onChange={this.handleChange}
/>
<Chaild Inputed={this.state.Inputed} />
Стандартный обработчик работает и корректно отображает свойство в пределах этого контрола, но в дочерний контрол значение передается с опозданием на одну букву
handleChange = (event) => {
console.log("Value from event:", event.target.value);
this.setState({ Inputed: event.target.value }, () => {
console.log("Value from State:", this.state.Inputed);
});
}
после долгих мытарств обработчик написан так
handleChange = async function (event) {
await this.setState({ Inputed: event.target.value });
console.log(this.state.Inputed);
this.setState({ Inputed: this.state.Inputed });//повторно ввожу чтобы обновить дочерний контрол
}
Вопрос: есть ли какой ни будь стандартный способ бороться с таким поведением?
На мой взгляд это баг.
К примеру во Vue такой проблемы нет.