複数の関数onClick ReactJSを呼び出す

バニラjsで知っている、私たちができる

onclick="f1();f2()"

ReactJSでonClickの2つの関数呼び出しを行うことと同等のものは何ですか

私は1つの関数を呼び出すことがこのようなものであることを知っています：

onClick={f1}

2つ以上の関数呼び出しを別の関数/メソッドでラップします。そのアイデアのいくつかの変形があります：

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>

2つ目は、私が知っている最短の道路です。お役に立てば幸いです。

任意の要素に対して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() }}は、2つの異なる機能を同時に使用する場合に非常に役立ちました。しかし、今はボタンが1つだけのオーディオレコーダーを作成したいと思います。したがって、最初にf1()クリックした場合はStartFunctionを実行し、もう一度クリックした場合はStopFunction を実行しますf2()。

どうやってこれを実現しますか？

ネストして使用できます。

2つの関数がopenTab()あり、もう1つは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}