this.state içinde onPress olay sırasında tanımlanmamış tepki yerli

Question

i yeni yerel tepki Merhaba, benim kodudur:

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

i bu formu ve basın işareti doldurmak i var Bu hata mesajı: "undefined" özelliği 'email' okunamıyor ". Yardımlarınız için teşekkür ederiz!

Answer 1

Bu bir cilt sorunudur. En basit çözüm şöyle düğme etiketi için JSX değiştirmek olacaktır:

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

ES6 sınıflar ES5 react.createClass ile karşı kullanılmış olabilir autobinding kaybederler. Reaksiyon bileşenleri için ES6 kullanıldığında bağlamanızın daha bilinçli olması gerekir.

Başka bir seçenek şöyle Yapıcınızda yöntemi bağlamak için:

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

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

Yoksa bile 'bu' oluşturduğunuz bileşene bağlanması korumak için şişman ok ES6 sözdizimi fonksiyonunu kullanmak olabilir:

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

gÜNCELLEME: ortamınız ben tepki yerliinşa inanıyoruz bazı ES7 özelliklerini (destekliyorsa

, yine bu güncellemek içinveya create-react-native-app shoudl do) Bu gösterimi, this anahtar sözcüğünü kullanan sınıf yöntemlerinizi otomatik olarak bağlamak için kullanabilirsiniz. yerine

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

ait

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

iyi seçenekler oluşturucu içinde bağlamak için varsa veya ES7 özelliği kullanmak için vardır. onPress={() => this.onPress()} veya onPress={this.onPress.bind(this)} numaralı bir anonim işlevini doğrudan Button üzerinde kullanmak, performans nedeniyle çok daha az kullanışlıdır.