THE WORLD'S LARGEST WEB DEVELOPER SITE

React Events


Just like HTML, React can perform actions based on user events.

React has the same events as HTML: click, change, mouseover etc.


Adding Events

React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={shoot}  instead of onClick="shoot()".

React:

<button onClick={shoot}>Take the Shot!</button>

Run Example »

HTML:

<button onclick="shoot()">Take the Shot!</button>


Event Handlers

A good practice is to put the event handler as a method in the component class:

Example:

Put the shoot function inside the Football component:

class Football extends React.Component {
  shoot() {
    alert("Great Shot!");
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

Run Example »


Bind this

For methods in React, the this keyword should represent the component that owns the method.

That is why you should use arrow functions. With arrow functions, this will always represent the object that defined the arrow function.

Example:

class Football extends React.Component {
  shoot = () => {
    alert(this);
    /*
    The 'this' keyword refers to the component object
    */
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

Run Example »

Why Arrow Functions?

In class components, the this keyword is not defined by default, so with regular functions the this keyword represents the object that called the method, which can be the global window object, a HTML button, or whatever.

Read more about binding this in our React ES6 'What About this?' chapter.

If you must use regular functions instead of arrow functions you have to bind this to the component instance using the bind() method:

Example:

Make this available in the shoot function by binding it in the constructor function:

class Football extends React.Component {
  constructor(props) {
    super(props)
    this.shoot = this.shoot.bind(this)
  }
  shoot() {
    alert(this);
    /*
    Thanks to the binding in the constructor function,
    the 'this' keyword now refers to the component object
    */
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

Run Example »

Without the binding, the this keyword would return undefined.


Passing Arguments

If you want to send parameters into an event handler, you have two options:

1. Make an anonymous arrow function:

Example:

Send "Goal" as a parameter to the shoot function, using arrow function:

class Football extends React.Component {
  shoot = (a) => {
    alert(a);
  }
  render() {
    return (
      <button onClick={() => this.shoot("Goal")}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

Run Example »

Or:

2. Bind the event handler to this.

Note that the first argument has to be this.

Example:

Send "Goal" as a parameter to the shoot function:

class Football extends React.Component {
  shoot(a) {
    alert(a);
  }
  render() {
    return (
      <button onClick={this.shoot.bind(this, "Goal")}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

Run Example »

Note on the second example: If you send arguments without using the bind method, (this.shoot(this, "Goal") instead of this.shoot.bind(this, "Goal")), the shoot function will be executed when the page is loaded instead of waiting for the button to be clicked.


React Event Object

Event handlers have access to the React event that triggered the function.

In our example the event is the "click" event. Notice that once again the syntax is different when using arrow functions or not.

With the arrow function you have to send the event argument manually:

Example:

Arrow Function: Sending the event object manually:

class Football extends React.Component {
  shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }
  render() {
    return (
      <button onClick={(ev) => this.shoot("Goal", ev)}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

Run Example »

Without arrow function, the React event object is sent automatically as the last argument when using the bind() method:

Example:

With the bind() method, the event object is sent as the last argument:

class Football extends React.Component {
  shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }
  render() {
    return (
      <button onClick={this.shoot.bind(this, "Goal")}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

Run Example »