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

Ответ 1

Оберните два вызова функции + другой функцией/методом. Вот несколько вариантов этой идеи:

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>

Ответ 2

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

Обычный тип объявления функции (не ES6+):

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

Анонимная функция или тип функции стрелки (ES6+)

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

Второй - самый короткий путь, который я знаю. Надеюсь, это поможет вам!

Ответ 3

Вызывая несколько функций в onClick для любого элемента, вы можете создать функцию-оболочку, что-то вроде этого.

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

Эти функции могут быть определены как метод в родительском классе и затем вызваны из функции-оболочки.

У вас может быть основной элемент, который вызовет onChange, как это,

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

Ответ 4

Вам не нужно создавать обертку для него. Вы можете просто использовать функцию стрелки и поставить оператор && между вызовами функций (по своей природе он будет оценивать обе стороны выражения и вызывать ваши функции).

<PlayIcon onClick={() => start() && closeTab()} />

Вы также можете сделать это:

<PlayIcon
          onClick={() => {
            start();
            closeTab();
          }}
        />

Но в зависимости от инструментов, которые вы используете, он может начать перенос строк. Мне просто не нравится, как это выглядит стилистически.