调用多个函数 onClick ReactJS

Question

我知道在 vanilla JavaScript 中，我们可以这样做：

onclick="f1();f2()"

在 ReactJS 中进行两个函数调用 onClick 的等价物是什么？

我知道调用一个函数是这样的：

onClick={f1}

原文由 user2554585 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将您的两个以上函数调用包装在另一个函数/方法中。以下是该想法的几个变体：

1) 分离法

var Test = React.createClass({
 onClick: function(event){
 func1();
 func2();
 },
 render: function(){
 return (
 <a href="#" onClick={this.onClick}>Test Link</a>
 );
 }
 });

或者使用 ES6 类：

 class Test extends React.Component {
 onClick(event) {
 func1();
 func2();
 }
 render() {
 return (
 <a href="#" onClick={this.onClick}>Test Link</a>
 );
 }
 }

2) 内联

<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>

或 ES6 等价物：

 <a href="#" onClick={() => { func1(); func2();}}>Test Link</a>

原文由 Rob M. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

也许你可以使用箭头函数 (ES6+) 或简单的旧函数声明。

普通函数声明类型（ 非 ES6+ ）：

 <link href="#" onClick={function(event){ func1(event); func2();}}>Trigger here</link>

匿名函数或箭头函数类型（ ES6+ ）

 <link href="#" onClick={(event) => { func1(event); func2();}}>Trigger here</link>

第二条是我所知道的最短路线。希望对你有帮助！

原文由 Nikolas Freitas Mr Nik 发布，翻译遵循 CC BY-SA 4.0 许可协议