I know in vanilla JavaScript, we can do:
JavaScript
x
2
1
onclick="f1();f2()"
2
What would be the equivalent for making two function calls onClick
in ReactJS?
I know calling one function is like this:
JavaScript
1
2
1
onClick={f1}
2
Advertisement
Answer
Wrap your two+ function calls in another function/method. Here are a couple variants of that idea:
1) Separate method
JavaScript
1
12
12
1
var Test = React.createClass({
2
onClick: function(event){
3
func1();
4
func2();
5
},
6
render: function(){
7
return (
8
<a href="#" onClick={this.onClick}>Test Link</a>
9
);
10
}
11
});
12
or with ES6 classes:
JavaScript
1
12
12
1
class Test extends React.Component {
2
onClick(event) {
3
func1();
4
func2();
5
}
6
render() {
7
return (
8
<a href="#" onClick={this.onClick}>Test Link</a>
9
);
10
}
11
}
12
2) Inline
JavaScript
1
2
1
<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>
2
or ES6 equivalent:
JavaScript
1
2
1
<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>
2