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

119

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

onclick="f1();f2()"

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

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

onClick={f1}

javascript reactjs user2554585
источник

Очень просто: передайте функцию, которая вызывает две функции, как если бы вы использовали ele.onclick = ...или addEventListener.

Феликс Клинг

Если ваша первая функция - setState и вам нужно убедиться, что это происходит / учитывается до запуска второй функции, вы найдете этот пост весьма полезным: medium.com/better-programming/ ...

Nasia Makrygianni,

220

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

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>

Роб М.
источник

5

Или менее оптимально:onclick={function() { f1(); f2(); }}

Феликс Клинг

48

Или в ES6onclick={()=>{ f1(); f2() }}

Алехандро Силва

2

Или в cjsx:onClick={ () => f1(); f2() }

Vadorequest

2

что, если первый будет асинхронным .. я хочу, чтобы второй выполнялся только после того, как первый будет успешно завершен

Ratnabh kumar rai 02

1

@Ratnabhkumarrai - это совсем другая проблема, не имеющая отношения к React. Все дело в асинхронности в JS, и Promisesэто, вероятно, ответ, который вы искали.

Эмиль Бержерон,

12

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

Тип объявления нормальной функции ( не ES6 + ):

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

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

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

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

Николас Фрейтас г-н Ник
источник

7

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

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

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

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

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

Ашиш Сингх
источник

0

это onclick={()=>{ f1(); f2() }}мне очень помогло, если мне нужны две разные функции одновременно. Но теперь я хочу создать аудиомагнитофон с одной кнопкой. Итак, если я нажимаю сначала, я хочу запустить StartFunction, f1()а если я снова нажимаю, я хочу запустить StopFunction f2().

Как вы это понимаете?

Лаура
источник

Что насчет функции с генератором? Вы можете выбрать переменную, которая изменяется внутри условия, после которого есть функция, а затем вы вызываете нужную функцию с yield

Николас Фрейтас Мистер Ник,

const play = () => {   console.log("played");   }  const pause = () => {   console.log("paused");   }  function* audioSwitcher() {   let paused = true; 	while (true) { 		if(paused) { 			play();			 		} else { 			pause(); 		} 		 		yield paused = !paused; 	} }

Николас Фрейтас Г-н Ник

0

Вы можете использовать вложенные.

Есть одна функция буксировки, 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}

Анкит Кумар Раджпут
источник

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

Ответы: