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