2014-09-26 19 views
39

weiß, dass ich in Vanille js, was wir tun könnenAufruf mehrerer Funktionen onClick ReactJS

onclick="f1();f2()" 

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

ich eine Funktion kennen Aufruf ist wie folgt:

onClick={f1} 
+0

Ganz einfach: Pass eine Funktion, die die beiden Funktionen aufruft, so wie du mit 'ele.onclick = ...' oder 'addEventListener' zu würden. –

Antwort

74

Wickeln Sie Ihre zwei + Funktion in einer anderen Funktion/Methode aufruft. 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> 
+4

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

+8

Oder in ES6' onclick = {() => {f1(); f2()}} ' –

+2

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