दिलचस्प पोस्ट
जब एचटीएमएल इकाइयों का इस्तेमाल किया जाना चाहिए PHP: 1 डी सरणी के सभी संभव संयोजन कैसे प्राप्त करें? कैसे BNF को EBNF में परिवर्तित करना सी ++ में वेक्टर और बहुरूपता बाकी एपीआई प्रमाणीकरण शुद्ध सीएसएस में बराबर ऊँचाई कॉलम कैसे बनाया जाए HTML में एक तत्व (एंकर लिंक) पर टैबस्टॉप को रोकें नोडजेएस बेस 64 छवि-फाइल लिखते हैं रूबी पर रेल में पिछले पृष्ठ पर कैसे रीडायरेक्ट करें? Arrays। जावा में बहुआयामी सरणी के साथ भरें एक std :: vector के इटरेटर के सूचकांक को प्राप्त करने का सबसे प्रभावी तरीका क्या है? पायथन प्रमुख शून्य के साथ संख्याओं का व्याख्या कैसे करता है नेट पर कोई अच्छा UIScrollView ट्यूटोरियल हैं? जावा में अगले शब्द पढ़ें क्या एक्सएएमएल में डिबग मोड के लिए एक सशर्त कंपाइलर निर्देश है?

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

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 फ़ंक्शन से सीधे जुड़ा हुआ है। कोई अन्य पैरामीटर इस तरह से पारित नहीं किया जा सकता है