Вызов нескольких функций onClick ReactJS


Я знаю, в vanilla js, мы можем сделать

onclick="f1();f2()"

что было бы эквивалентно для выполнения двух вызовов функций onClick в ReactJS?

Я знаю, что вызов одной функции, как это:

onClick={f1}
2 52

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) Inline

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

или эквивалент ES6:

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

может быть, вы можете просто использовать функцию стрелки (ES6+)

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

Это самая короткая дорога, которую я знаю