Document how React's onChange relates to onInput
See original GitHub issueIt 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:
- Created 8 years ago
- Reactions:18
- Comments:18 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Hashnode Post
No results found
Yeah…why? I don’t understand why React chose to make
onChange
behave likeonInput
does. As fas as I can tell, we have no way of getting the oldonChange
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.
Agree with mnpenner.
With
onChange
fireing on every keystroke, my redux store changes simultaneously. To avoid that, I have to useonBlur
.Finally, we have two events -
onInput
andonChange
- which work same manner.