Client-side Checking with React.js JSX Events Using onBlur

Capturing and applying logic to an HTML onBlur event allows other UI interactivity. This guide will hook in logic with an onBlur event in a React.js component.

Oct 5, 2020 • 6 Minute Read

Subscribe to the newsletter

Introduction

One common event in HTML is onBlur, wherein an input element loses focus as it is passed to another element. This is often done when the user hits tab or simply clicks the next input element. Capturing this event and applying logic to it allows other UI interactivity, such as validation of user input as focus is released. This way the user won't have to wait to submit the input before finding out what went wrong. This simple example will demonstrate how to hook in logic with the onBlur event in the context of a React.js component.

Setup

Suppose you have a login form that accepts a username and password in the form of a React.js component.

      import React from 'react';

export default class LoginForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      username: "",
      password: "",
      messageUsername: "",
      messagePassword: ""
    }
  }

  render() {
    return (
      <div>
        <label>
          Username:
        </label>
        <input
          type="text"
        />
        {this.state.messageUsername}
        <br/>
        <label>
          Password:
        </label>
        <input
          type="password"
        />
        {this.state.messagePassword}
        <hr/>
        <button>
          Login
        </button>
      </div>
    );
  }
}
    

The following state values are maintained in this component:

username: The variable to hold the username that the user would enter
password: The variable to hold the password that the user would enter
messageUsername: Message to be displayed after user loses focus from username input and some condition is passed to invoke a notification relating to the username.
messagePassword: Message to be displayed after user loses focus from password input and some condition is passed to invoke a notification relating to the password.

Event Handlers

You should have an event handler function that will be triggered in the event of an onBlur. To do this, first define the needed function:

      handleOnBlurUsername(event) {
  var username        = event.target.value;
  var messageUsername = "";

  if(!username) {
    messageUsername = "Username required"; 
  }

  this.setState({
    username: username,
    messageUsername: messageUsername
  });
}
    

The logic of the function is pretty simple. First, it gets the username of the input by accessing it from event.target.value. Next, it sets a blank value for a temporary messageUsername variable. You apply a simple rule that checks if username has a value. If not, then fill in a value of "Username required" for messageUsername. The function ends by updating the state of username and messageUsername for this component.

Binding to onBlur

Given your event handler, attach the function to the input element for the username like so:

      <input
  type="text"
  onBlur={this.handleOnBlurUsername.bind(this)}
/>
    

Make sure that you call .bind(this) after the function in order to retain this to point to the instance of the component.

Now that the function is attached to the input, if a user leaves or releases focus from the input element for username and nothing was put in, messageUsername will be set with a message which in turn will appear below the input element, thus notifying the user that they need to input a username.

Overall Code

The overall code should look like the following:

      import React from 'react';

export default class LoginForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      username: "",
      password: "",
      messageUsername: "",
      messagePassword: ""
    }
  }

  handleOnBlurUsername(event) {
    var username        = event.target.value;
    var messageUsername = "";

    if(!username) {
      messageUsername = "Username required"; 
    }

    this.setState({
      username: username,
      messageUsername: messageUsername
    });
  }

  render() {
    return (
      <div>
        <label>
          Username:
        </label>
        <input
          type="text"
          onBlur={this.handleOnBlurUsername.bind(this)}
        />
        {this.state.messageUsername}
        <br/>
        <label>
          Password:
        </label>
        <input
          type="password"
        />
        {this.state.messagePassword}
        <hr/>
        <button>
          Login
        </button>
      </div>
    );
  }
}

Test it out by first clicking the username input element and then immediately pressing tab or clicking the password input element to release focus from the username input. The message should then appear after the focus is released if nothing was put in.
    

Conclusion

There are many events in HTML that allow you to attach event handlers to add additional logic and create a more interactive experience with the user. 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.setState.

If you notice the code, only username handling was implemented. As additional practice, try the same approach discussed in this guide to attach an event handler to onBlur for the password section of the component. Try to add additional rules to change the message that appears below each input element if that rule is invoked.