TouchableHighlight onPresse funktioniert nicht

Question

Ich habe eine Anmeldeseite implementiert, die so lange funktioniert hat, bis ich das reaktionsnative Upgrade durchgeführt habe.

Das Problem, das ich habe, ist, dass die onPress prop nicht aufgerufen werden:

<TouchableHighlight style={styles.button} 
     underlayColor='#f1c40f' 
     onPress={this.signIn}> 
    <Text style={styles.buttonText}>Sign In</Text> 
</TouchableHighlight> 

Hier ist meine Signin Funktion:

signIn: function(){ 
console.log("SignInAction signIn") 
this.fetchData(); }, 

Die Signin Taste, wenn sie niedergedrückt werden, erscheint I Klicken Sie darauf, aber die Protokollanweisung wird nicht ausgelöst.

Answer 1

Try es so nennen:

onPress={() => this.signIn() }> 

Es sieht aus wie die "this" in Ihrer Funktion an den falschen Umfang gebunden ist.

Answer 2

Sie können es auch tun, wie folgt:

onPress={this.signIn.bind(this)}> 

der Rest des Codes nicht ändern müssen.

Answer 3

Auch, wenn Sie wollen nicht, um den Einsatz zu binden und da wir ES6 Syntax verwenden, könnten Sie Ihre Funktion aus als const (innerhalb Ihrer Komponente) und nicht eine Funktion zB zugeordnet schreiben:

signIn =() => { 
    // code here 
} 

dann können Sie es nennen noch die Komponente innerhalb wie Sie bereits sind, ohne in den Konstruktor zu binden oder anderswo:

<TouchableHighlight style={styles.button} 
     underlayColor='#f1c40f' 
     onPress={this.signIn}> 
    <Text style={styles.buttonText}>Sign In</Text> 
</TouchableHighlight> 

Dies sollte da Signin halten Kontext von „dieser“ consistent an die gebunden werden Komponente nur einmal bei der Initialisierung.