यह देशी कैसे प्रतिक्रिया मूल में अपरिभाषित है?

Question

मैं मूल देशी, प्रतिक्रिया.जेएस, और जावास्क्रिप्ट प्रतिक्रिया में एक पूर्ण नौसिखिया हूँ। मैं एंड्रॉइड डेवलपर हूं इसलिए आरएन को एक कोशिश देना चाहूंगा।

असल में, अंतर onPress में है;

इस कोड से पता चलता 'undefined' जब टॉगल() चलाता है:

class LoaderBtn extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { loading: false }; 
    } 

    toggle() { 
     console.log(this.state); 
     // let state = this.state.loading; 
     console.log("Clicked!") 
     // this.setState({ loading: !state }) 
    } 

    render() { 
     return (
      <Button style={{ backgroundColor: '#468938' }} onPress={this.toggle}> 
       <Text>{this.props.text}</Text> 
      </Button> 
     ); 
    } 
} 

लेकिन इस कोड काम करता है:

class LoaderBtn extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { loading: false }; 
    } 

    toggle() { 
     console.log(this.state); 
     // let state = this.state.loading; 
     console.log("Clicked!") 
     // this.setState({ loading: !state }) 
    } 

    render() { 
     return (
      <Button style={{ backgroundColor: '#468938' }} onPress={() => {this.toggle()}}> 
       <Text>{this.props.text}</Text> 
      </Button> 
     ); 
    } 
} 

तुम मुझे अंतर, कृपया व्याख्या कर सकते हैं?

जावा/Kotlin हम विधि संदर्भ है, मूल रूप से यह समारोह गुजरता है, तो हस्ताक्षर, एक ही हैं onPress =() => {} और toggle =() => {}

लेकिन जे एस में यह काम नहीं करता :(

Answer 1

मुद्दा यह है कि पहला उदाहरण toggle() में सही this करने के लिए बाध्य नहीं है।

आप ctor में यह बाध्य कर सकते हैं या तो:

constructor(props) { 
    super(props); 
    this.toggle = this.toggle.bind(this); 
    ... 

या उपयोग करें एक उदाहरण समारोह (ठीक कुछ परिस्थितियों में):

toggle =() => { 
    ... 
} 

यह दृष्टिकोण stage-2 या transform-class-properties के माध्यम से परिवर्तन का निर्माण की आवश्यकता है।

उदाहरण संपत्ति कार्यों के साथ चेतावनी यह है कि प्रति-घटक एक फ़ंक्शन बनाया गया है। यह ठीक है अगर पृष्ठ पर उनमें से कई नहीं हैं, लेकिन यह ध्यान में रखना कुछ है।

यह मूल जेएस है; this article regarding React Binding Patterns मदद कर सकता है।

Answer 2

तरह मुझे लगता है क्या है हो रहा दायरे की बात कर रहा है। जब आप onPress={this.toggle} का उपयोग यह है कि क्या आप अपने टॉगल समारोह में उम्मीद कर रहे हैं नहीं है। हालांकि, तीर कार्यों अलग व्यवहार प्रदर्शन और स्वचालित रूप से this करने के लिए बाध्य है। आप onPress={this.toggle.bind(this)} उपयोग कर सकते हैं।

furthe आर पढ़ने -

ES6 Arrow Functions

.bind()

Answer 3

इस पहले उदाहरण में क्या हो रहा है यह है कि आपने "इस" का दायरा खो दिया है। आम तौर पर मैं क्या इसलिए की तरह निर्माता में मेरे सभी कार्यों को परिभाषित करने के लिए है:

constructor(props) { 
    super(props); 
    this.state = { loading: false }; 
    this.toggle = this.toggle.bind(this); 
} 

दूसरे उदाहरण में, आप ES6 सिंटैक्स का उपयोग कर रहे हैं, जो स्वत: इस बाँध होगा (जिसके कारण यह काम करता है)।

फिर आपके अंदर प्रेस फ़ंक्शन पर, आपको बनाए गए फ़ंक्शन को कॉल करने की आवश्यकता है।तो यह ऐसा कुछ दिखाई देगा,

onPress={this.toggle}