Rufen Sie onClick ReactJS mehrere Funktionen auf

116

Ich weiß, in Vanille js können wir tun

onclick="f1();f2()"

Was wäre das Äquivalent für zwei Funktionsaufrufe von onClick in ReactJS?

Ich weiß, dass das Aufrufen einer Funktion folgendermaßen aussieht:

onClick={f1}

javascript reactjs user2554585
quelle

Ganz einfach: Übergeben Sie eine Funktion, die die beiden Funktionen aufruft, genau wie Sie es mit ele.onclick = ...oder tun würden addEventListener.

Felix Kling

Falls Ihre 1. Funktion setState ist und Sie sicherstellen müssen, dass dies geschieht / berücksichtigt wird, bevor die 2. Funktion ausgeführt wird, finden Sie diesen Beitrag sehr hilfreich: medium.com/better-programming/…

Nasia Makrygianni

215

Wickeln Sie Ihre zwei + Funktionsaufrufe in eine andere Funktion / Methode ein. Hier sind einige Varianten dieser Idee:

1) Separate Methode

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

oder mit ES6-Klassen:

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>

oder ES6-Äquivalent:

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

Rob M.
quelle

5

Oder weniger optimal:onclick={function() { f1(); f2(); }}

Felix Kling

46

Oder in ES6onclick={()=>{ f1(); f2() }}

Alejandro Silva

2

Oder in cjsx:onClick={ () => f1(); f2() }

Vadorequest

2

Was ist, wenn der erste asynchron ist? Ich möchte, dass der zweite erst ausgeführt wird, nachdem der erste erfolgreich abgeschlossen wurde

Ratnabh Kumar Rai

1

@Ratnabhkumarrai, das ist ein ganz anderes Problem, das nichts mit React zu tun hat. In JS dreht sich alles um Async und Promisesist wahrscheinlich die Antwort, nach der Sie gesucht haben.

Emile Bergeron

11

Möglicherweise können Sie die Pfeilfunktion (ES6 +) oder die einfache alte Funktionsdeklaration verwenden.

Normaler Funktionsdeklarationstyp ( nicht ES6 + ):

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

Anonyme Funktion oder Pfeilfunktionstyp ( ES6 + )

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

Der zweite ist der kürzeste Weg, den ich kenne. Hoffe es hilft dir!

Nikolas Freitas Herr Nik
quelle

6

Wenn Sie bei onClick mehrere Funktionen für ein beliebiges Element aufrufen, können Sie eine Wrapper-Funktion erstellen.

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

Diese Funktionen können als Methode für die übergeordnete Klasse definiert und dann von der Wrapper-Funktion aufgerufen werden.

Möglicherweise haben Sie das Hauptelement, das den onChange wie folgt verursacht:

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

Ashish Singh
quelle

0

Das onclick={()=>{ f1(); f2() }}hat mir sehr geholfen, wenn ich zwei verschiedene Funktionen gleichzeitig haben möchte. Aber jetzt möchte ich einen Audiorecorder mit nur einer Taste erstellen. Wenn ich also zuerst klicke, möchte ich die StartFunction ausführen, f1()und wenn ich erneut klicke, möchte ich StopFunction ausführen f2().

Wie merkt ihr das?

Laura
quelle

Was ist mit einer Funktion mit einem Generator? Sie können mit einer Variablen entscheiden, die sich innerhalb einer Bedingung ändert, nach der eine Funktion folgt, und dann die gewünschte Funktion mit Yield aufrufen

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 Herr Nik

0

Sie können verschachtelt verwenden.

Es gibt zwei Funktionen, eine ist openTab()und eine andere closeMobileMenue(). Zuerst rufen wir openTab()eine andere Funktion im Inneren auf und rufen sie auf 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
quelle

Rufen Sie onClick ReactJS mehrere Funktionen auf

Antworten: