web-dev-qa-db-de.com

Rufen Sie mehrere Funktionen auf Click ReactJS auf

Ich weiß, in Vanilla Js können wir das tun

onclick="f1();f2()"

Was wäre das Äquivalent, wenn Sie in ReactJS zwei Funktionsaufrufe onClick machen würden?

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

onClick={f1}
63
user2554585

Wickeln Sie Ihre beiden + Funktionsaufrufe in eine andere Funktion/Methode. Hier sind ein paar 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={(event) => { func1(); func2();}}>Test Link</a>
126
Rob M.

Vielleicht 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!

Wenn Sie mehrere Funktionen für jedes Element in onClick 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 die OnChange-Funktion wie folgt auslösen wird:

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