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')
);