Викличте кілька функцій onClick ReactJS

116

Я знаю, що у ванільному js ми можемо зробити

onclick="f1();f2()"

Що було б еквівалентом для здійснення двох функціональних дзвінків onClick в ReactJS?

Я знаю, виклик однієї функції такий:

onClick={f1}

javascript reactjs

— користувач2554585
джерело

Дуже просто: передайте функцію, яка викликає дві функції, так, як ви хотіли б із ele.onclick = ...або addEventListener.

— Фелікс Клінг

Якщо ваша перша функція буде встановлена, і вам потрібно переконатися, що це відбувається / враховано до запуску 2-ої функції, ця публікація стане вам дуже корисною: medium.com/better-programming/…

— Nasia Makrygianni

217

Оберніть два дзвінки функції в іншу функцію / метод. Ось кілька варіантів такої ідеї:

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={() => { func1(); func2();}}>Test Link</a>

— Роб М.
джерело

5

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

— Фелікс Клінг

47

Або в ES6onclick={()=>{ f1(); f2() }}

— Алехандро Сільва

2

Або в cjsx:onClick={ () => f1(); f2() }

— Vadorequest

2

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

— першого

1

@Ratnabhkumarrai - це зовсім інша проблема, яка не пов'язана з React. Вся справа в асинхронності в JS і Promises, ймовірно, відповідь, яку ви шукали.

— Еміль Бержерон

11

Можливо, ви можете використовувати функцію стрілки (ES6 +) або просту стару декларацію функції.

Тип оголошення звичайної функції ( не ES6 + ):

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

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

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

Другий - це найкоротша дорога, яку я знаю. Сподіваюся, це допоможе вам!

— Ніколас Фрейтас Містер Нік
джерело

6

Викликаючи кілька функцій 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().

Як ви, хлопці, це усвідомлюєте?

— Лора
джерело

Що стосується функції з генератором? Ви можете визначитися зі змінною, яка змінюється всередині умови, яка має функцію після неї, тоді ви викликаєте функцію, яку ви хочете з урожайністю

— Nikolas Freitas Mr Nik

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}

— Анкіт Кумар Раджпут
джерело