여러 함수 호출 onClick ReactJS

나는 vanilla 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() .

너희들은 이것을 어떻게 깨닫는가?

중첩을 사용할 수 있습니다.

하나는 tow 함수 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}