this.state में onPress घटना के दौरान अपरिभाषित है प्रतिक्रिया देशी

Question

हैलो मैं नए देशी प्रतिक्रिया, मेरे कोड है:

import React, { 
 
    View, 
 
    Text, 
 
    TextInput, 
 
    Component 
 
} from 'react-native'; 
 

 
import Style from './styles/signin'; 
 
import Button from '../common/button'; 
 

 
export default class SignIn extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     email: '', 
 
     password: '' 
 
    }; 
 
    } 
 

 
    render(){ 
 
    return(
 
     <View style={Style.container}> 
 
     <Text style={Style.label}>Email</Text> 
 
     <TextInput 
 
      style={Style.input} 
 
      onChangeText={(text) => this.setState({email: text})} 
 
      value={this.state.email} 
 
     /> 
 
     <Text style={Style.label}>Password</Text> 
 
     <TextInput 
 
      style={Style.input} 
 
      onChangeText={(text) => this.setState({password: text})} 
 
      value={this.state.password} 
 
      secureTextEntry={true} 
 
     /> 
 
     <Button text={'Sign in'} onPress={this.onPress}/> 
 
     </View> 
 
    ); 
 
    } 
 
    onPress(){ 
 
    console.log(this.state.email); 
 
    } 
 
}

जब मैं में इस फार्म और प्रेस पर हस्ताक्षर को भरने, मेरे पास है यह त्रुटि संदेश: "अपरिभाषित की संपत्ति 'ईमेल' नहीं पढ़ सकता है। सहायता के लिए धन्यवाद!

Answer 1

यह एक बाध्यकारी मुद्दा है। सरल समाधान तो जैसे बटन टैग के लिए अपने JSX बदलने के लिए होगा:

<Button text={'Sign in'} onPress={this.onPress.bind(this)} /> 

ES6 कक्षाएं autobinding आप es5 react.createClass साथ करने के लिए इस्तेमाल किया गया हो सकता खो देते हैं। प्रतिक्रिया घटकों के लिए ES6 का उपयोग करते समय आपको अपने बाध्यकारी के बारे में अधिक जागरूक होना होगा।

एक अन्य विकल्प तो की तरह अपने निर्माता में विधि बाध्य करने के लिए है:

constructor(props) { 
    super(props); 
    this.state = { 
     email: '', 
     password: '' 
    }; 

    this.onPress = this.onPress.bind(this) 
    } 

या आप भी बनाए रखने के लिए 'इस' घटक आप बना रहे हैं के लिए बाध्य एक वसा तीर ES6 वाक्य रचना समारोह का उपयोग कर सकते हैं:

<Button text={'Sign in'} onPress={() => this.onPress()} /> 

अद्यतन: अपने वातावरण कुछ ES7 सुविधाओं (जो मेरा मानना ​​है कि प्रतिक्रिया देशीसे बनाया का समर्थन करता है, तो

यह फिर से अद्यतन करने के लिएया create-react-native-app shoudl do) आप this कीवर्ड का उपयोग करने वाले अपने वर्ग विधियों को स्वतः बाध्य करने के लिए इस नोटेशन का उपयोग कर सकते हैं।

// This is auto-bound so `this` is what you'd expect 
onPress =() => { 
    console.log(this.state.email); 
}; 

// This is not auto-bound so `this.state` will be `undefined` 
onPress(){ 
    console.log(this.state.email); 
} 

के बजाय

सबसे अच्छा विकल्प है, तो उपलब्ध या अपने निर्माता में बाध्य करने के लिए ES7 सुविधा का उपयोग करने हैं। किसी अज्ञात फ़ंक्शन का उपयोग onPress={() => this.onPress()} या onPress={this.onPress.bind(this)} सीधे आपके Button पर प्रदर्शन कारणों से बहुत कम अनुकूल है।