question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Document how React's onChange relates to onInput

See original GitHub issue

It would be nice for the Forms doc to be more explicit about the fact that React’s onChange supersedes, and should generally be used in place of, the DOM’s built-in onInput event. People might be used to using onInput instead for text inputs and textareas, since, with the raw DOM, the change event for these controls doesn’t fire until the control loses focus.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:18
  • Comments:18 (5 by maintainers)

github_iconTop GitHub Comments

116reactions
mnpennercommented, Dec 2, 2016

Yeah…why? I don’t understand why React chose to make onChange behave like onInput does. As fas as I can tell, we have no way of getting the old onChange behaviour back. Docs claim it’s a “misnomer” but it isn’t really, it does fire when there’s a change, just not until the input also loses focus.

For validation, sometimes we don’t want to show validation errors until they’re done typing. Or maybe we just don’t want a re-render on every keystroke. Now the only way to do that is with onBlur but now we also need to check that the value has changed manually.

It’s not that big of a deal, but it seems to me like React threw away a useful event and deviated from standard behaviour when there was already an event that does this.

29reactions
evpozdniakovcommented, May 23, 2016

Agree with mnpenner.

With onChange fireing on every keystroke, my redux store changes simultaneously. To avoid that, I have to use onBlur.

Finally, we have two events - onInput and onChange - which work same manner.

Read more comments on GitHub >

github_iconTop Results From Across the Web

In React, what's the difference between onChange and onInput?
The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when ...
Read more >
How onChange Differs Between React and Vanilla JavaScript
“The difference is that the onInput event occurs immediately after the value of an element has changed, while onChange occurs when the element ......
Read more >
React onInput instead of onChange for IE11 - CodePen
This div's content will be managed by React. --> ... Event is onInput instead of onChange. but behaves the same and works better...
Read more >
oninput Event - W3Schools
Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an...
Read more >
React onChange Events (With Examples) - Upmostly
JavaScript allows us to listen to an input's change in value by providing the attribute onchange. React's version of the onchange event handler...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Hashnode Post

No results found