I've got a form, in which I want to handle change event on text inputs, but React onChange triggering on key down (opposite to native JS, that triggers change event when an input field is out of focus).
Is there a React way to do what I want?
This question is related to
javascript
reactjs
If you want to only trigger validation when the input looses focus you can use onBlur
Trivia: React <17 listens to blur event and >=17 listens to focusout event.
You'd need to be careful as onBlur has some caveats in IE11 (How to use relatedTarget (or equivalent) in IE?, https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget).
There is, however, no way to use onFocusOut in React as far as I can tell. See the issue on their github https://github.com/facebook/react/issues/6410 if you need more information.
Its late, yet it's worth your time nothing that, there are some differences in browser level implementation of focusin and focusout events and react synthetic onFocus and onBlur. focusin and focusout actually bubble, while onFocus and onBlur dont. So there is no exact same implementation for focusin and focusout as of now for react. Anyway most cases will be covered in onFocus and onBlur.
Source: Stackoverflow.com