I have a scenario where there has to be a event triggered when the input selected goes out of Focus.
There is already a onFocus event trigger when input is focused
<input onFocus={this.callFunction}/>
I need to know if there is an event that can be triggered when the selected input goes out of Focus. I could not find in React forms site
<input outOfFocus={this.callFunction}/>
Any Suggestion on this will be highly appreciated.
The onFocus event is called when the element (or some element inside of it) receives focus. For example, it's called when the user clicks on a text input. function Example() { return ( <input onFocus={(e) => { console. log('Focused on input'); }} placeholder="onFocus is triggered when you click this input." /> )
onBlur triggers when focus is lost from the input element in context. In React. js, we bind event handlers by passing a method defined in the component to be called accordingly. .bind(this) is called in order to retain the value of this and expose component methods within the event handler function such as this.
The HTML DOM onblur event occurs when an object loses focus. The onblur event is the opposite of the onfocus event. The onblur event is mostly used with form validation code (e.g. when the user leaves a form field).
The focusout event occurs when an element (or any elements inside it) loses focus. The focusout() method attaches a function to run when a focusout event occurs on the element, or any elements inside it. Unlike the blur() method, the focusout() method also triggers if any child elements lose focus.
There is event onBlur
<input onBlur={this.callFunction} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With