this.state non è definito nel corso di eventi onPress a reagire nativo

Question

Ciao i nuovi a reagire madre, il mio codice è:

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

Quando ho compilare questo modulo e premere il tasto segno, ho questo messaggio di errore: "Impossibile leggere la proprietà 'email' di undefined". Grazie per l'aiuto!

Answer 1

Questo è un problema vincolante. La soluzione più semplice è quello di cambiare la vostra JSX per il tag pulsante mi piace così:

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

ES6 classi perdono l'autobinding potrebbe essere stato usato per con react.createClass ES5. Devi essere più consapevole del tuo legame quando si utilizza ES6 per reagire componenti.

Un'altra opzione è quella di legare il metodo nel costruttore in questo modo:

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

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

Oppure si potrebbe anche utilizzare una funzione di sintassi ES6 grasso freccia a mantenere la 'questo' legame con il componente che si sta creando:

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

UPDATE:

Per aggiornare di nuovo questo, se l'ambiente supporta alcune caratteristiche ES7 (che credo reagiscono-native costruite da react-native init o create-react-native-app fare shoudl) è possibile utilizzare questa notazione per associare automaticamente i metodi di classe che utilizzano la parola chiave this.

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

invece di

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

Le migliori opzioni sono per utilizzare la funzione ES7 se disponibile, oppure di legare nel costruttore. L'uso di una funzione anonima onPress={() => this.onPress()} o onPress={this.onPress.bind(this)} direttamente sul tuo Button è molto meno favorevole per motivi di prestazioni.