Sometimes, we want to correctly catch change or focusOut event on text input in React.
In this article, we’ll look at how to correctly catch change or focusOut event on text input in React.
How to correctly catch change or focusOut event on text input in React?
To correctly catch change or focusOut event on text input in React, we can watch the blur event.
For instance, we write
function Example() {
return (
<input
onBlur={(e) => {
console.log("Triggered because this input lost focus");
}}
placeholder="onBlur"
/>
);
}
to add an input into the Example component.
We set its onBlur prop to a function that’s called when we move our focus away from the input.
Conclusion
To correctly catch change or focusOut event on text input in React, we can watch the blur event.
