कई कार्यों को कॉल करें ReactJS पर क्लिक करें

Question

मैं वेनिला js में जानता हूं, हम कर सकते हैं

onclick="f1();f2()"

ReactJS में दो फ़ंक्शन कॉल करने के लिए क्या समान होगा?

मुझे पता है कि एक फ़ंक्शन को कॉल करना इस तरह है:

onClick={f1}

Comments

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

— फेलिक्स क्लिंग

यदि आपका 1 फ़ंक्शन सेटस्टैट है और आपको यह सुनिश्चित करने की आवश्यकता है कि यह 2 फ़ंक्शन चलाने से पहले हो रहा है / ध्यान में रखा गया है, तो आपको यह पोस्ट काफी मददगार

— मिलेगी

Answer 1

अपने दो + फ़ंक्शन कॉल को किसी अन्य फ़ंक्शन / विधि में लपेटें। यहाँ उस विचार के कुछ रूप हैं:

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>

या ईएस 6 समकक्ष:

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

Comments

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

— फेलिक्स क्लिंग

या ईएस 6 मेंonclick={()=>{ f1(); f2() }}

— एलेजांद्रो सिल्वा

या cjsx में:onClick={ () => f1(); f2() }

— वाडोरक्वेस्ट

क्या होगा अगर पहले एक अतुल्यकालिक है .. मैं चाहता हूं कि दूसरा एक को सफलतापूर्वक पूरा होने के बाद ही निष्पादित किया जाए

— रत्नाभ कुमार राय

@Ratnabhkumarrai यह एक पूरी तरह से दूसरी चिंता है जो रिएक्ट से संबंधित नहीं है। यह JS में async के बारे में है और Promisesसंभवतः वह उत्तर है जिसकी आपको तलाश थी।

— एमिल बर्जरॉन

Answer 2

हो सकता है कि आप एरो फंक्शन (ES6 +) या साधारण पुराने फंक्शन डिक्लेरेशन का उपयोग कर सकते हैं।

सामान्य फ़ंक्शन घोषणा प्रकार ( ES6 + नहीं ):

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

बेनामी फ़ंक्शन या एरो फ़ंक्शन प्रकार ( ES6 + )

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

दूसरा सबसे छोटा रास्ता है जो मुझे पता है। आशा है कि यह आपकी मदद करता है!

Answer 3

किसी भी तत्व के लिए onClick पर कई कार्यों को कॉल करके, आप एक आवरण फ़ंक्शन बना सकते हैं, कुछ इस तरह।

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

इन कार्यों को मूल वर्ग पर एक विधि के रूप में परिभाषित किया जा सकता है और फिर आवरण समारोह से बुलाया जा सकता है।

आपके पास मुख्य तत्व हो सकता है जो इस तरह onChange का कारण होगा,

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

Answer 4

इस onclick={()=>{ f1(); f2() }}मुझे एक बहुत मदद की अगर मैं एक ही समय में दो अलग-अलग कार्यों चाहते हैं। लेकिन अब मैं केवल एक बटन के साथ एक ऑडीओकेयर बनाना चाहता हूं। इसलिए अगर मैं पहले क्लिक करता हूं f1()तो मैं स्टार्टफंक्शन चलाना चाहता हूं और अगर मैं फिर से क्लिक करता हूं तो मैं स्टॉपफंक्शन चलाना चाहता हूं f2()।

आप लोगों को इसका एहसास कैसे होगा?

Comments

एक जनरेटर के साथ एक समारोह के बारे में क्या? आप एक चर के साथ तय कर सकते हैं जो एक शर्त के अंदर बदलता है जिसके बाद एक फ़ंक्शन होता है, फिर आप उस फ़ंक्शन को कॉल करते हैं जिसे आप उपज के साथ चाहते हैं

— निकोलस फ्रीटस श्री निक

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

— निकोलस फ्रीटस निक निक

Answer 5

आप नेस्टेड का उपयोग कर सकते हैं।

टो फ़ंक्शन एक हैं openTab()और दूसरा है closeMobileMenue(), सबसे पहले हम कॉल करते हैं openTab()और दूसरे फ़ंक्शन को अंदर बुलाते हैं 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}