Can I call multiple event handlers in response to a single event?

FAQ React.js FAQ
#1

Question

Can I call multiple event handlers in response to a single event?

Answer

By passing an anonymous function, or a named function, with multiple event handler calls as the function body, to our event listener (like onClick, onKeyUp, onChange, etc) we can call multiple event handlers in response to a single event.

For example:
Using an anonymous function:

import React from 'react';
import ReactDOM from 'react-dom';

class MyButton extends React.Component {
  eventHandler1() {
    console.log('eventHandler1 called!');
  }

  eventHandler2() {
    console.log('eventHandler2 called!');
  }

  render() {
    return ( 
      <button onClick={() => {
        this.eventHandler1();
        this.eventHandler2();
      }}>Here's a button!</button> // here `onClick` is set to an anonymous function where the function body contains multiple function calls that will be triggered on the click event of the button
    )
  }
};

ReactDOM.render(
  <MyButton />,
  document.getElementById('app')
);

and using a named function:

import React from 'react';
import ReactDOM from 'react-dom';

class MyButton extends React.Component {
  eventHandler1() {
    console.log('eventHandler1 called!');
  }

  eventHandler2() {
    console.log('eventHandler2 called!');
  }

  handleClick = () => {
    this.eventHandler1();
    this.eventHandler2();
  }

  render() {
    return (
      <button onClick={this.handleClick}>Here's a button!</button> // here `onClick` is set to a named function `handleClick` where the function body contains multiple function calls that will be triggered on the click event of the button
    )
  }
};

ReactDOM.render(
  <MyButton />,
  document.getElementById('app')
);
12 Likes
FAQ: Components and Advanced JSX - Use an Event Listener in a Component
#2

isn’t it necessary here to define a constructor and then bind this to the event handler ?

#3

It depends. If you’re writing code before React version 16, then yes, you’d have to bind each method being used in a class component to this. Also in this example, arrow functions are being used for the event handlers, so the context of this changes, which basically boils down to not having to bind this.

1 Like
#4

How can I pass values to the function if we are not using () while calling?

Example:

class Button extends React.Component {
  scream(m) {
    alert(m);
  }

  render() {
    return <button onClick={this.scream("hello")}>AAAAAH!</button>;
  }
}

This doesn’t work. Why?

1 Like
#5

The way you use onClick={this.scream(“hello”)} you are executing the function and the result will be the value of onClick , to make this work you can create an anonymous function instead

class Button extends React.Component {
  scream(m) {
    alert(m);
  }

  render() {
    return <button onClick={ () => this.scream("hello") }>AAAAAH!</button>;
  }
}
10 Likes
#6

What about receiving multiple events handlers on a child functional component ?do you just say
onClick={props.handleClick} once?

#7

This is SO helpful. Thanks!

#8

Now I get a bit confused.
We are not using parens here; {this.scream}, but this is not a getter function.
Anyone care to explain?