Wywołaj wiele funkcji onClick ReactJS

117

Wiem, że w waniliowym js możemy to zrobić

onclick="f1();f2()"

Jaki byłby odpowiednik wykonania dwóch wywołań funkcji onClick w ReactJS?

Wiem, że wywołanie jednej funkcji wygląda tak:

onClick={f1}

javascript reactjs

— user2554585
źródło

Bardzo proste: przekaż funkcję, która wywołuje dwie funkcje, tak jak w przypadku ele.onclick = ...lub addEventListener.

— Felix Kling

W przypadku, gdy twoja pierwsza funkcja jest ustawiona na stan i musisz się upewnić, że dzieje się to / brane pod uwagę przed uruchomieniem drugiej funkcji, ten post będzie bardzo pomocny: medium.com/better-programming/ ...

— Nasia Makrygianni

218

Zawiń swoje dwa + wywołania funkcji w inną funkcję / metodę. Oto kilka wariantów tego pomysłu:

1) Oddzielna metoda

var Test = React.createClass({
   onClick: function(event){
      func1();
      func2();
   },
   render: function(){
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
});

lub z klasami 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>

lub odpowiednik ES6:

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

— Rob M.
źródło

5

Lub mniej optymalnie:onclick={function() { f1(); f2(); }}

— Felix Kling

47

Lub w ES6onclick={()=>{ f1(); f2() }}

— Alejandro Silva

2

Lub w cjsx:onClick={ () => f1(); f2() }

— Vadorequest

2

co jeśli pierwszy jest asynchroniczny ... chcę, aby drugi był wykonywany dopiero po pomyślnym zakończeniu pierwszego

— Ratnabh kumar rai

1

@Ratnabhkumarrai to zupełnie inna sprawa, która nie jest związana z React. Chodzi o async w JS i Promisesprawdopodobnie są odpowiedzią, której szukałeś.

— Emile Bergeron

12

Może możesz użyć funkcji strzałkowej (ES6 +) lub prostej starej deklaracji funkcji.

Typ deklaracji funkcji normalnej ( nie ES6 + ):

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

Funkcja anonimowa lub typ funkcji strzałkowej ( ES6 + )

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

Druga to najkrótsza droga, jaką znam. Mam nadzieję, że ci to pomoże!

— Nikolas Freitas Pan Nik
źródło

7

Wywołując wiele funkcji onClick dla dowolnego elementu, możesz utworzyć funkcję opakowującą, coś w tym rodzaju.

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

Funkcje te można zdefiniować jako metodę w klasie nadrzędnej, a następnie wywołać z funkcji opakowania.

Możesz mieć główny element, który spowoduje zmianę onChange w ten sposób,

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

— Ashish Singh
źródło

0

bardzo onclick={()=>{ f1(); f2() }}mi to pomogło, jeśli chcę mieć jednocześnie dwie różne funkcje. Ale teraz chcę stworzyć nagrywarkę audio za pomocą tylko jednego przycisku. Jeśli więc kliknę najpierw, chcę uruchomić StartFunction, f1()a jeśli kliknę ponownie, chcę uruchomić StopFunction f2().

Jak to sobie uświadamiacie?

— Laura
źródło

A co z funkcją z generatorem? Możesz zdecydować za pomocą zmiennej, która zmienia się wewnątrz warunku, po którym następuje funkcja, a następnie wywołujesz funkcję, którą chcesz z wydajnością

— 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; 	} }

— Nikolas Freitas Pan Nik

0

Możesz użyć zagnieżdżonych.

Istnieje jedna funkcja holowania, openTab()a druga to closeMobileMenue(), po pierwsze wywołujemy openTab()i wywołujemy inną funkcję w środku 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}

— Ankit Kumar Rajpoot
źródło