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

Question

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

संस्करण अलग-अलग कैसे हैं? या यह सिर्फ वरीयता का मामला है?

---

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

Answer 1

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

पहले की स्थापना की है पर निर्भर करता है पारित किया जा सकता। .bind(this) का उपयोग इस संदर्भ को आपके घटकों के कार्य में बाध्य करने के लिए किया जाता है। प्रतिक्रिया ES6 कक्षाएं ऑटो बाध्य संदर्भ नहीं हैं इसलिए आपको स्पष्ट रूप से बाध्य होना चाहिए। ऐसा करने के कुछ तरीके हैं और .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 संदर्भ के बारे में है। दूसरा यह है कि अपने हैंडलर फ़ंक्शन पर तर्क कैसे पारित करें।

Answer 2

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

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

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

वहाँ

सही संदर्भ

पहले

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

इस एक हम bind स्पष्ट के उपयोग onChange घटना एक तर्क के रूप उपलब्ध बनाने के लिए कार्य करने के लिए बनाने के अलावा करने के लिए अपने onChange समारोह बाध्य करने के लिए तीन तरीके घटना के लिए हैंडलर। हम यह भी तरह

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

दूसरा

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

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

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

तीसरा

तीर समारोह

someEventHandler =() => { 
    console.log(this); // now this refers to context of React component 
} 

का उपयोग कर समारोह someEventHandler को परिभाषित करें एक arrow function का अपना this नहीं है, this संलग्न निष्पादन संदर्भ के मान का उपयोग किया जाता है और इसलिए उपर्युक्त कार्य सही संदर्भ प्राप्त करता है।

निर्माता में

या यह बाँध तरह

constructor(props) { 
    super(props); 
    this.someEventHandler = this.someEventHandler.bind(this); 
} 


return <input onChange={this.someEventHandler}> 

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