2014-09-26 3 views
39

मैं जानता हूँ कि वेनिला js में, हम कर सकते हैंकॉल अनेक कार्यों का onClick ReactJS

onclick="f1();f2()" 

क्या दो समारोह onClick ReactJS में कॉल करने के लिए बराबर हो सकता है?

मैं एक समारोह बुला पता इस तरह है:

onClick={f1} 
+0

बहुत सरल: दो फ़ंक्शंस को कॉल करने वाले फ़ंक्शन को पास करें, जैसे कि आप 'ele.onclick = ...' या 'addEventListener'' के साथ करेंगे। –

उत्तर

74

अपने दो + समारोह एक और समारोह/विधि में कॉल लपेटें।

1) अलग-अलग विधि

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

या साथ ES6 कक्षाएं:

class Test extends React.Component { 
    onClick(event) { 
     func1(); 
     func2(); 
    } 
    render() { 
     return (
     <a href="#" onClick={this.onClick}>Test Link</a> 
    ); 
    } 
} 

2) इनलाइन

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

यहाँ उस विचार की एक जोड़ी वेरिएंट हैं या ES6 समतुल्य:

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

या कम इष्टतम: 'onclick = {function() {f1(); f2(); }} ' –

+8

या ES6' onclick = {() => {f1() में; f2()}} ' –

+2

या सीजेएसएक्स में:' onClick = {() => f1(); एफ 2()} ' – Vadorequest