Styjun

Turning arguments into exponents

Dropping outliers based on "2.5 times the RMSE"

How can one write good dialogue in a story without sounding wooden?

Which states have a head of state or government from another country?

How to turn off Magnifying glass ( not the one in accessibility)

Science writing - exact, precise, or accurate

As the Dungeon Master, how do I handle a player that insists on a specific class when I already know that choice will cause issues?

Can I play a first turn Simic Growth Chamber to have 3 mana available in the second turn?

What are the steps/action plan to introduce Test Automation in a company?

Why does the autopilot disengage even when it does not receive pilot input?

How do I take a fraction to a negative power?

Are randomly-generated passwords starting with "a" less secure?

How can I deal with a player trying to insert real-world mythology into my homebrew setting?

Were there any new Pokémon introduced in the movie Pokémon: Detective Pikachu?

Why do players in the past play much longer tournaments than today's top players?

Is this floating-point optimization allowed?

Overlapping vs Non-overlapping returns

Why does Hellboy file down his horns?

Finding maximum distribution between multiple columns

Referring to different instances of the same character in time travel

How the name "craqueuhhe" is read

Why did the Japanese attack the Aleutians at the same time as Midway?

How to achieve this rough borders and stippled illustration look?

When did the Roman Empire fall according to contemporaries?

Keydown is trigger before onChange on

When to use React setState callbackHow do you disable browser Autocomplete on web form field / input tag?<button> vs. <input type=“button” />. Which to use?HTML text input allow only numeric inputStyling an input type=“file” buttonBest way to track onchange as-you-type in input type=“text”?HTML-encoding lost when attribute read from input fieldCan I use a :before or :after pseudo-element on an input field?Get the value in an input text boxSet focus on input after render'mouseenter' and 'mouseleave' event keeps triggering with div as cursor

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

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?

html reactjs

share|improve this question

asked Mar 26 at 4:03

congce wangcongce wang

833 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you have to use callback in setstate function,stackoverflow.com/questions/42038590/…
  
  – Kishan Jaiswal
  Mar 26 at 4: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 at 21:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  then try getting value by using ref
  
  – Kishan Jaiswal
  Mar 27 at 4:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you tried ignoring Enter key in your handler onInputChange?
  
  – blaz
  Mar 27 at 5:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @blaz Sorry how to include Enter key in onChange?
  
  – congce wang
  Mar 27 at 23:39
  

  
  
  
  

add a comment | 

1

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?

html reactjs

share|improve this question

asked Mar 26 at 4:03

congce wangcongce wang

833 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you have to use callback in setstate function,stackoverflow.com/questions/42038590/…
  
  – Kishan Jaiswal
  Mar 26 at 4: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 at 21:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  then try getting value by using ref
  
  – Kishan Jaiswal
  Mar 27 at 4:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you tried ignoring Enter key in your handler onInputChange?
  
  – blaz
  Mar 27 at 5:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @blaz Sorry how to include Enter key in onChange?
  
  – congce wang
  Mar 27 at 23:39
  

  
  
  
  

add a comment | 

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?

html reactjs

share|improve this question

asked Mar 26 at 4:03

congce wangcongce wang

833 bronze badges

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

share|improve this question

asked Mar 26 at 4:03

congce wangcongce wang

833 bronze badges

share|improve this question

asked Mar 26 at 4:03

congce wangcongce wang

833 bronze badges

asked Mar 26 at 4:03

congce wangcongce wang

833 bronze badges

asked Mar 26 at 4:03

congce wangcongce wang

833 bronze badges

3 Answers
3

active

oldest

votes

0

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

share|improve this answer

answered Mar 27 at 8:54

EliasElias

45833 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Like your answer sounds clear and workable! Thanks!!!
  
  – congce wang
  Mar 27 at 23:39
  

  
  
  
  

add a comment | 

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

share|improve this answer

answered Mar 26 at 5:55

binodstha7binodstha7

41922 silver badges88 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What's the difference between mine?
  
  – congce wang
  Mar 26 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.
  
  – binodstha7
  Mar 27 at 2: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
  
  – Elias
  Mar 27 at 9: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.
  
  – binodstha7
  Mar 27 at 10:03
  

  
  
  
  

add a comment | 

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

share|improve this answer

edited Mar 27 at 6:00

answered Mar 26 at 4:42

Kishan JaiswalKishan Jaiswal

40111 silver badge66 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No... I think it still has the same problem. Basically, it has the same behavior as the example.
  
  – congce wang
  Mar 26 at 21:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  sorry, you're correct! Seems it should be work! Thanks!
  
  – congce wang
  Mar 27 at 23:37
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55349673%2fkeydown-is-trigger-before-onchange-on-input%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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

share|improve this answer

answered Mar 27 at 8:54

EliasElias

45833 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Like your answer sounds clear and workable! Thanks!!!
  
  – congce wang
  Mar 27 at 23:39
  

  
  
  
  

add a comment | 

0

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

share|improve this answer

answered Mar 27 at 8:54

EliasElias

45833 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Like your answer sounds clear and workable! Thanks!!!
  
  – congce wang
  Mar 27 at 23:39
  

  
  
  
  

add a comment | 

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

share|improve this answer

answered Mar 27 at 8:54

EliasElias

45833 silver badges1515 bronze badges

<input
 onKeyPress=this.onKeyPress />

onKeyPress = e => 
 if(e.which === 13) 
 // Send Query
 search(e.target.value);
 

onKeyPress = e => 
 let value = e.target.value;
 if(e.which === 13) 
 // Send Query
 search(value);
 else this.setState(searchText: value);

share|improve this answer

answered Mar 27 at 8:54

EliasElias

45833 silver badges1515 bronze badges

answered Mar 27 at 8:54

EliasElias

45833 silver badges1515 bronze badges

answered Mar 27 at 8:54

EliasElias

45833 silver badges1515 bronze badges

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

share|improve this answer

answered Mar 26 at 5:55

binodstha7binodstha7

41922 silver badges88 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What's the difference between mine?
  
  – congce wang
  Mar 26 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.
  
  – binodstha7
  Mar 27 at 2: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
  
  – Elias
  Mar 27 at 9: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.
  
  – binodstha7
  Mar 27 at 10:03
  

  
  
  
  

add a comment | 

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

share|improve this answer

answered Mar 26 at 5:55

binodstha7binodstha7

41922 silver badges88 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What's the difference between mine?
  
  – congce wang
  Mar 26 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.
  
  – binodstha7
  Mar 27 at 2: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
  
  – Elias
  Mar 27 at 9: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.
  
  – binodstha7
  Mar 27 at 10:03
  

  
  
  
  

add a comment | 

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

share|improve this answer

answered Mar 26 at 5:55

binodstha7binodstha7

41922 silver badges88 bronze badges

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

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

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

share|improve this answer

answered Mar 26 at 5:55

binodstha7binodstha7

41922 silver badges88 bronze badges

answered Mar 26 at 5:55

binodstha7binodstha7

41922 silver badges88 bronze badges

answered Mar 26 at 5:55

binodstha7binodstha7

41922 silver badges88 bronze badges

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

share|improve this answer

edited Mar 27 at 6:00

answered Mar 26 at 4:42

Kishan JaiswalKishan Jaiswal

40111 silver badge66 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No... I think it still has the same problem. Basically, it has the same behavior as the example.
  
  – congce wang
  Mar 26 at 21:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  sorry, you're correct! Seems it should be work! Thanks!
  
  – congce wang
  Mar 27 at 23:37
  

  
  
  
  

add a comment | 

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

share|improve this answer

edited Mar 27 at 6:00

answered Mar 26 at 4:42

Kishan JaiswalKishan Jaiswal

40111 silver badge66 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No... I think it still has the same problem. Basically, it has the same behavior as the example.
  
  – congce wang
  Mar 26 at 21:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  sorry, you're correct! Seems it should be work! Thanks!
  
  – congce wang
  Mar 27 at 23:37
  

  
  
  
  

add a comment | 

 <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

share|improve this answer

edited Mar 27 at 6:00

answered Mar 26 at 4:42

Kishan JaiswalKishan Jaiswal

40111 silver badge66 bronze badges

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

share|improve this answer

edited Mar 27 at 6:00

answered Mar 26 at 4:42

Kishan JaiswalKishan Jaiswal

40111 silver badge66 bronze badges

answered Mar 26 at 4:42

Kishan JaiswalKishan Jaiswal

40111 silver badge66 bronze badges

answered Mar 26 at 4:42

Kishan JaiswalKishan Jaiswal

40111 silver badge66 bronze badges