Keydown is trigger before onChange on

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?

you have to use callback in setstate function,https://stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback — Kishan Jaiswal, Mar 26 '19 at 04:27
Yes! But the `onKeyPress ` is called before `onInputChange `. So `onSearch` is triggered before `onInputChange `(setState). In this case setstate's callback will not work. — congce wang, Mar 26 '19 at 21:30
Have you tried ignoring Enter key in your handler `onInputChange`? — blaz, Mar 27 '19 at 05:32

Kishan Jaiswal · Answer 1 · 2019-03-27T06:00:35.277

0

    <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

edited Mar 27 '19 at 06:00

answered Mar 26 '19 at 04:42

Kishan Jaiswal

644
3
14

No... I think it still has the same problem. Basically, it has the same behavior as the example. – congce wang Mar 26 '19 at 21:17
sorry, you're correct! Seems it should be work! Thanks! – congce wang Mar 27 '19 at 23:37

score 0 · Answer 2 · answered Mar 26 '19 at 05:55

0

<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 ...
  }
}

answered Mar 26 '19 at 05:55

iambinodstha

937
10
11

1

What's the difference between mine? – congce wang Mar 26 '19 at 21:07
Yeah there's a difference.The `KeyDown` event is triggered when the user presses a Key. while The `KeyPress` event is triggered when the user presses & releases a Key. – iambinodstha Mar 27 '19 at 02:32
Incorrect at least as far as I know/read. `keypress` is triggered immediately. The difference is actually: `keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. `. [Reference](https://developer.mozilla.org/en-US/docs/Web/Events/keydown) – Elias Mar 27 '19 at 09:03
yeah i was wrong actually `KeyUp` event is triggered when the user presses & releases a Key. but `KeyDown` event is fired first than `KeyPress` event and `KeyPress` event will not fired in all key pressed like when BackSpace key is pressed `KeyPress` event will not fire. – iambinodstha Mar 27 '19 at 10:03

score 0 · Accepted Answer · answered Mar 27 '19 at 08:54

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 ^^

Keydown is trigger before onChange on

3 Answers3