여러 함수 호출 onClick ReactJS

여러 함수 호출 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={(event) => { 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();
}

These functions can be defined as a method on the parent class and then called from the wrapper function.

You may have the main element which will cause the onChange like this,

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

참고URL : https://stackoverflow.com/questions/26069238/call-multiple-functions-onclick-reactjs