रिएक्ट इवेंट हैंडलर

Question

में इसका कोई कारण किसी कारण से प्रतिक्रिया ईवेंट हैंडलर में इसका मूल्य खो जा रहा है। डॉक्स मैंने सोचा था कि प्रतिक्रिया यहाँ कुछ सामान किया यकीन है कि यह सही मान के लिए स्थापित किया गया था बनाने के लिए पढ़ना

निम्नलिखित के रूप में मैं

import React from 'react'; 

export default class Observer extends React.Component { 

    handleClick() { 
     console.log(this); //logs undefined 
    } 
    render() { 
     return (
      <button onClick={this.handleClick}>Click</button> 
     ); 
    } 
} 

उम्मीद थी काम नहीं करता है लेकिन यह करता है:

import React from 'react'; 

export default class Observer extends React.Component { 

    handleClick() { 
     console.log(this); //logs Observer class instance 
    } 
    render() { 
     return (
      <button onClick={this.handleClick.bind(this)}>Click</button> 
     ); 
    } 
} 

प्रतिक्रिया और ईएस 6 मेरे लिए नया है लेकिन यह सही व्यवहार नहीं लगता है?

Answer 1

यह जावास्क्रिप्ट के लिए सही व्यवहार है और यदि आप नए class वाक्यविन्यास का उपयोग करते हैं तो प्रतिक्रिया दें।

autobinding feature does not apply to ES6 classes v0.13.0 में।

तो तुम का उपयोग करना होगा:

<button onClick={this.handleClick.bind(this)}>Click</button> 

या अन्य चाल में से एक:

export default class Observer extends React.Component { 
    constructor() { 
    super(); 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
    /* ... */ 
    } 
    render() { 
     return <button onClick={this.handleClick}>Click</button> 
    } 
} 

Answer 2

की तरह अन्य लोगों ने कहा, प्रतिक्रिया उदाहरण के लिए तरीकों जब ES6 का उपयोग कर autobind नहीं है कक्षाएं। जैसा कि कहा गया, मैं हमेशा की तरह ईवेंट हैंडलर्स में तीर फ़ंक्शन का उपयोग करने की आदत बनाना होगा: onClick={e => this.handleClick()}

के बजाय

: onClick={this.handleClick.bind(this)}

इसका कारण यह है इसका मतलब है कि आप handleClick विधि एक जासूस के साथ एक परीक्षण में, आप बदल सकते हैं कुछ जब आप बांध का उपयोग करते हैं तो नहीं कर सकते हैं।

Answer 3

स्वीकार किए जाते हैं जवाब अच्छा है और मैं इसे ES6 में एक बहुत उपयोग किया है, लेकिन मैं सिर्फ एक और "अधिक आधुनिक" समाधान हम ES7 (React component class auto-binding notes में उल्लेख किया है) के साथ है जोड़ना चाहते हैं: class properties के रूप में तीर कार्यों का उपयोग, तो आपको कहीं भी अपने हैंडलर को बांधने या लपेटने की आवश्यकता नहीं है।

export default class Observer extends React.Component { 
    handleClick = (e) => { 
    /* ... */ 
    } 
    render() { 
     return <button onClick={this.handleClick}>Click</button> 
    } 
} 

यह अभी तक का सबसे सरल और साफ समाधान है!