Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Opposite of 'onFocus' in React

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.

like image 726
Sijan Shrestha Avatar asked May 31 '16 09:05

Sijan Shrestha


People also ask

What is Onfocus in React?

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." /> )

What is Onblur React?

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.

What is Onblur and Onfocus in Javascript?

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).

What is Focusout event?

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.


1 Answers

There is event onBlur

<input onBlur={this.callFunction} />
like image 190
Oleksandr T. Avatar answered Sep 18 '22 07:09

Oleksandr T.