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')
);
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.
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
The difference lies in whether you are calling a function in the opening tag as the attribute value of the event handler or calling a function between tags
Actually my wording was a bit off earlier on, here is a better explanation:
For event handlers, we do not want to call the function and have the value saved to the event handler, as it would cause the code to break or behave weirdly (eg. when the function returns a function, then the function that is returned will be called in response to the event)
Hence, we do not add brackets to the function which is the attribute value of an event handler.
For functions between tags that are not getter functions, we actually want to call the function and access the returned value, hence brackets should be added