Event handlers in React

Learn how to declare event handlers in this article by Adam Boduch, a seasoned web application developer with a breadth of experience ranging from jQuery to React and everything in between.

React has a unique approach to handling events: declaring event handlers in JSX. The differentiating factor with event handling in React components is that it’s declarative. Contrast this with something like jQuery, where you have to write imperative code that selects the relevant DOM elements and attaches event handler functions to them.

The advantage with the declarative approach to event handlers in JSX markup is that they’re part of the UI structure. Not having to track down the code that assigns event handlers is mentally liberating. In this article, you’ll write a basic event handler, so you can get a feel for the declarative event handling syntax found in React applications. Then, you’ll learn how to use generic event handler functions.

Here’s a look at a basic component that declares an event handler for the click event of an element:

      import React, { Component } from 'react';

      export default class MyButton extends Component {
      // The click event handler, there's nothing much happening here other than a log of the event.
      onClick() {
          console.log('clicked');
      }
      // Renders a "<button>" element with the "onClick" event handler set to the "onClick()" method of this component.
        render() {
          return (
            <button onClick={this.onClick}>{this.props.children}/>
          );
        }
      }
                

The event handler function, this.onClick(), is passed to the onClick property of the <button> element. By looking at this markup, it's clear what code is going to run when the button is clicked.

The declarative event handler syntax is easy to read when there’s more than one handler assigned to an element. Sometimes, for example, there are two or three handlers for an element. Imperative code is difficult to work with for a single event handler, let alone several of them. When an element needs more handlers, it’s just another JSX attribute. This scales well from a code maintainability perspective:

      import React, { Component } from 'react';
      export default class MyInput extends Component {
      // Triggered when the value of the text input changes...
      onChange() {
        console.log('changed');
      }
      // Triggered when the text input loses focus...
      onBlur() {
        console.log('blurred');
      }
      // JSX elements can have as many event handler properties as necessary.
        render() {
          return <input onChange={this.onChange} onBlur={this.onBlur} />;
        }
      }
                  

This <input> element could have several more event handlers, and the code would be just as readable.

As you keep adding more event handlers to your components, you’ll notice that a lot of them do the same thing. Next, you’ll learn how to share generic handler functions across components.

Read more about event handlers in React.