调用onClick ReactJS的多个函数

我知道在香草js中，我们可以做到

onclick="f1();f2()"

在ReactJS中进行两个函数onClick的等效操作是什么？

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

onClick={f1}

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

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>

也许您可以使用箭头函数（ES6 +）或简单的旧函数声明。

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

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

匿名功能或箭头功能类型（ES6 +）

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

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

在onClick上为任何元素调用多个函数，您可以创建一个包装函数，如下所示。

wrapperFunction = () => {
    //do something
    function 1();
    //do something
    function 2();
    //do something
    function 3();
}

这些函数可以定义为父类上的方法，然后从包装函数中调用。

您可能具有将导致像这样的onChange的主要元素，

<a href='#' onClick={this.wrapperFunction}>Some Link</a>

onclick={()=>{ f1(); f2() }}如果我想同时使用两个不同的功能，这对我很有帮助。但是现在我想只用一个按钮创建一个录音机。因此，如果我首先单击，我想运行StartFunction f1()，如果我再次单击，则我想运行StopFunction f2()。

你们如何认识到这一点？

您可以使用嵌套。

有两个函数是一个openTab()，另一个是closeMobileMenue()，首先我们openTab()在内部调用并调用另一个函数closeMobileMenue()。

function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
    closeMobileMenue()   //After open new tab, Nav Menue will close.  
}

onClick={openTab}