Keydown is trigger before onChange on <input/> - html

Question

I have a requirement that after typing certain content in an tag, pressing enter will do search function.
It running well normally like:
<input
onChange={this.onInputChange}
onKeyPress={this.onSearch}
/>
onInputChange = (e) => {
console.log(2);
this.setState({
searchText: e.target.value
})
}
onSearch = (e) => {
console.log(1);
if (e.which === 13) {
search(this.state.searchText); // some search api ...
}
}
But if user Enter really quickly, like 0.1s, the this.state.searchText is not get updated properly.
This is not just caused by setState is async method, but the onKeyPress is trigger before onChange.
is there any idea to deal with this issue?

Answer 1

So I can't really understand why you use two separate functions.
First of all, if you only use searchText for the two functions you could just do:
HTML
<input
onKeyPress={this.onKeyPress} />
JS
onKeyPress = e => {
if(e.which === 13) {
// Send Query
search(e.target.value);
}
}
And even if you needed searchText somewhere else you could just do:
onKeyPress = e => {
let value = e.target.value;
if(e.which === 13) {
// Send Query
search(value);
} else this.setState({searchText: value});
}
If I missed something please tell me ^^

Answer 2

<input
onChange={this.onInputChange}
onKeyDown={this.onSearch}
/>
onInputChange = (e) => {
this.setState({
searchText: e.target.value
})
}
onSearch = (e) => {
if (e.keyCode === 13) {
search(this.state.searchText); // some search api ...
}
}

Answer 3

<input
ref={(input) => this.selectVal = input}
onKeyPress={(e) => e.which === 13 ?this.onSearch():''}
/>
onSearch = () => {
console.log("value",this.selectVal.value);
// search(this.input.current.value); // some search api ...
}
try this way