दिलचस्प पोस्ट
मैं Visual Studio 2010 में एक CUDA ऐप कैसे शुरू करूं? WooCommerce: मूल्य ओवरराइड के साथ कार्ट में उत्पाद जोड़ें? एंड्रॉइड TYPE_LINEAR_ACCELERATION सेंसर – यह क्या दिखाता है? Python dict को kwargs परिवर्तित? एएसपी.नेट एमवीसी 4 – लूप पोस्ट मॉडल संग्रह गुणों के लिए लेकिन अग्रक नहीं है फ्लास्क / जिन्जा 2 का उपयोग करके टेम्पलेट को HTML पास करना एक्लिप्स डीडीएमएस त्रुटि "डीबगर के लिए स्थानीय 8600 में बाइंड नहीं कर सकता" पायथन में दो शब्दकोशों की तुलना करना एचटीएमएल चार्सेट एन्कोडिंग के साथ PHP गड़बड़ PHP के साथ बहुत बड़े अपलोड पायथन प्रोग्राम को सी / सी ++ कन्वर्ट करने के लिए? Ggplot2 में अक्ष और क्षेत्र-भूखंड के बीच स्थान कैसे निकालना? अनपेक्षित जावास्क्रिप्ट दिनांक व्यवहार एंड्रॉइड ऑफस्क्रीन पेज का स्क्रीनशॉट ले रहा है प्रति पंक्ति एक पंक्ति का चयन करके डेटा फ़्रेम को संक्षिप्त करना

प्रतिक्रियाओं में क्यों और कब कार्य और घटनाहैंडर्स को बाध्य करने की आवश्यकता है?

class SomeClass extends Component{ someEventHandler(event){ } render(){ return <input onChange={------here------}> } } 

मुझे ------here------ भाग के विभिन्न संस्करण देखें।

 // 1 return <input onChange={this.someEventHandler.bind(this)}> // 2 return <input onChange={(event) => { this.someEventHandler(event) }> // 3 return <input onChange={this.someEventHandler}> 

संस्करण अलग कैसे होते हैं? या यह वरीयता की बात है?


उत्तर और टिप्पणियों के लिए आप सभी को धन्यवाद सभी सहायक होते हैं, और मैं दृढ़ता से इस लिंक को पहली बार पढ़ने की सलाह देता हूं यदि आप इस बारे में मेरे बारे में उलझन में हैं
http://blog.andrewray.me/react-es6-autobinding-and-createclass/

वेब के समाधान से एकत्रित समाधान "प्रतिक्रियाओं में क्यों और कब कार्य और घटनाहैंडर्स को बाध्य करने की आवश्यकता है?"

प्रत्येक अलग है और यह निर्भर करता है कि आपका घटक कैसे सेट अप किया गया है

सबसे पहले .bind(this) आपके इस संदर्भ को अपने घटकों समारोह में बाँधने के लिए प्रयोग किया जाता है। ईएस 6 वर्गों पर प्रतिक्रिया दें, स्वतः संदर्भ बाँध न करें ताकि आपको स्पष्ट रूप से बाध्य कर सकें। ऐसा करने के लिए कुछ तरीके हैं और .bind(this) एक तरीका है। अगर आप उस विधि का उपयोग नहीं करना चाहते हैं, तो आप या तो

ए। आपके निर्माता में बाइंडिंग करना उर्फ

 class SomeClass extends Component{ constructor(){ super(); this.someEventHandler = this.someEventHandler.bind(this); } someEventHandler(event){ } .... } 

या बी कक्षा के चरम तीर कार्यों पर अपने कस्टम कार्य करें उर्फ

 class SomeClass extends Component{ someEventHandler = (event) => { } .... } 

इस संदर्भ बाध्यकारी सभी के साथ सभी सौदों।

दूसरा onChange={(event) => { this.someEventHandler(event) } एक इनलाइन लैम्ब्डा (वसा तीर) फ़ंक्शन के साथ अपने घटकों के हैंडलर फ़ंक्शन लपेट रहा है जो कुछ अतिरिक्त कार्यक्षमता प्रदान कर सकता है चलिए कहते हैं कि आप अपने फ़ंक्शन को एक अतिरिक्त परम भेजना चाहते हैं, यह इस प्रकार प्राप्त करने का एक तरीका है।

<input onChange={(event) => { this.someEventHandler(event, 'username') }>

यह एक अतिरिक्त पैरामीटर को एक हेन्डलर फ़ंक्शन को पास करने का एक तरीका होगा यदि वांछित

तीसरा जब आप क्लिक ईवेंट होने पर ट्रिगर करने के लिए कॉलबैक फ़ंक्शन के रूप में फ़ंक्शन बस गुजर रहे हैं, तो कोई अतिरिक्त पैरामीटर नहीं है

संक्षेप में। ये तीन उदाहरण सभी एक क्लिक ईवेंट में हैंडलर फ़ंक्शन पास करने के लिए संबंधित हैं। हालांकि, ऐसी विभिन्न चीजें हैं जो आप उस पर जोड़ सकते हैं पहले आपके this संदर्भ के बारे में है दूसरा यह है कि आपके हैंडलर फ़ंक्शन को कैसे तर्क देना है।

क्यों एक प्रतिक्रिया समारोह बाँध?

जब आप किसी ES6 वर्ग के उपयोग से एक घटक को परिभाषित करते हैं, तो एक सामान्य पैटर्न एक ईवेंट हैंडलर के लिए होता है जो क्लास पर एक विधि होता है। जावास्क्रिप्ट में, वर्ग विधियों को डिफ़ॉल्ट रूप से बाध्य नहीं किया जाता है। अगर आप इस। कुछ bind this.someEventHandler को bind this.someEventHandler करने के लिए भूल जाते bind this.someEventHandler और इसे bind this.someEventHandler करने के bind this.someEventHandler पास करते हैं, तो फ़ंक्शन को वास्तव में कहा जाने पर यह अपरिभाषित होगा।

आम तौर पर, यदि आप इसके बिना () एक विधि को संदर्भित करते हैं, जैसे onChange={this.someEventHandler} , तो आपको उस विधि को बाध्य करना चाहिए।

अपने onChange फ़ंक्शन को सही संदर्भ में बाँधने के तीन तरीके हैं

प्रथम

 return <input onChange={this.someEventHandler.bind(this)}> 

इस एक में हम bind प्रयोग स्पष्ट रूप से कार्य करने के लिए ऑनशैंग घटना को ईवेंटहाण्डलर के लिए एक तर्क के रूप में उपलब्ध कराने के लिए करते हैं। हम कुछ अन्य पैरामीटर को भी वाक्य-रचना के प्रकार के साथ भेज सकते हैं

 return <input onChange={this.someEventHandler.bind(this, state.value)}> 

दूसरा

 return <input onChange={(event) => { this.someEventHandler(event) }> 

यह एक ES6 वाक्यविन्यास है, जिसके द्वारा हम कुछ पैरामीटर निर्दिष्ट कर सकते हैं जो हम कुछ someEventHandler फ़ंक्शन के पास करना चाहते हैं। यह बराबर है। .bind(this) हालांकि, यह हमें अन्य विशेषताओं को भेजने की लचीलापन भी देता है जैसे कि घटना के साथ

 return <input onChange={(event, value) => { this.someEventHandler(event, value) }> 

तीसरा

 return <input onChange={this.someEventHandler}> 

इस पद्धति में, ईवेंट कुछ someEventHandler फ़ंक्शन से सीधे जुड़ा हुआ है। कोई अन्य पैरामीटर इस तरह से पारित नहीं किया जा सकता है