Call multiple functions onClick ReactJS
Maybe you can use arrow function (ES6+) or the simple old function declaration.
Normal function declaration type (Not ES6+):
<link href="#" onClick={function(event){ func1(event); func2();}}>Trigger here</link>
Anonymous function or arrow function type (ES6+)
<link href="#" onClick={(event) => { func1(event); func2();}}>Trigger here</link>
The second one is the shortest road that I know. Hope it helps you!
Wrap your two+ function calls in another function/method. Here are a couple variants of that idea:
1) Separate method
var Test = React.createClass({
onClick: function(event){
func1();
func2();
},
render: function(){
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
});
or with ES6 classes:
class Test extends React.Component {
onClick(event) {
func1();
func2();
}
render() {
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
}
2) Inline
<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>
or ES6 equivalent:
<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>
Calling multiple functions on onClick for any element, you can create a wrapper function, something like this.
wrapperFunction = () => {
//do something
function 1();
//do something
function 2();
//do something
function 3();
}
These functions can be defined as a method on the parent class and then called from the wrapper function.
You may have the main element which will cause the onChange like this,
<a href='#' onClick={this.wrapperFunction}>Some Link</a>