So behandeln Sie onPress-Funktion reagieren

Question

Ich verwende native mit NativeBase-Komponenten reagieren, und ich habe ein Problem beim Aufruf meiner _doStuff-Funktion. Ich habe versucht,

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

zu nennen, aber halten Empfang

nicht richtig ‚doStuff‘ lesen kann undefinierter

_doStuff(){ 
console.log('Hi'); 
    } 

_getList() { 
return this.state.listData.map(function(data, i){ 
return(

    <View key={i}> 
    <ListItem style={styles.listItemContain}> 
    <Button transparent onPress={this._doStuff.bind(this)}> 

    <View> 
    <Thumbnail source={{uri: data.icon}} style={styles.thumbnailStyle}/> 
    <Text style={styles.title}>{data.name}</Text> 
    <Text note style={styles.text}>{data.vicinity}</Text> 
    </View> 
     </Button> 

    </ListItem> 
    </View> 

); 
}); 

Answer 1

this Kontext ist im Inneren der Schleife .Map verloren. Wenn Sie ES6 verwenden, versuchen Sie Fett Pfeil Funktionen wie unten gezeigt zu verwenden.

_getList() { 
 
return this.state.listData.map((data, i) => { 
 
return(
 

 
    <View key={i}> 
 
    <ListItem style={styles.listItemContain}> 
 
    <Button transparent onPress={this._doStuff.bind(this)}> 
 

 
    <View> 
 
    <Thumbnail source={{uri: data.icon}} style={styles.thumbnailStyle}/> 
 
    <Text style={styles.title}>{data.name}</Text> 
 
    <Text note style={styles.text}>{data.vicinity}</Text> 
 
    </View> 
 
     </Button> 
 

 
    </ListItem> 
 
    </View> 
 

 
); 
 
});

wenn Sie ES6 kippen aus verschiedenen Gründen auf Ihrem Projekt verwenden die Verwendung der alternativen Ansatzes (alte Schule), wie unten ...

_getList() { 
 
return this.state.listData.map(function(data, i){ 
 
var that = this; 
 
return(
 

 
    <View key={i}> 
 
    <ListItem style={styles.listItemContain}> 
 
    <Button transparent onPress={that._doStuff.bind(that)}> 
 

 
    <View> 
 
    <Thumbnail source={{uri: data.icon}} style={styles.thumbnailStyle}/> 
 
    <Text style={styles.title}>{data.name}</Text> 
 
    <Text note style={styles.text}>{data.vicinity}</Text> 
 
    </View> 
 
     </Button> 
 

 
    </ListItem> 
 
    </View> 
 

 
); 
 
});

Answer 2

würde ich eine Wette machen, dass der Kontext Ihrer _getList Funktion tut habe nicht den Kontext der React-Komponente, die du denkst. Wenn Sie ES6-Klassen verwenden und eine automatische Freigabe des Komponentenkontexts erhalten möchten, würde ich die Verwendung von autobind-decorator empfehlen. Wenn Sie sich entscheiden, diesen Weg zu gehen, ist hier a nice tutorial on setting it up.

Andernfalls stellen Sie sicher, dass wenn Sie _getList anrufen, stellen Sie sicher, es mit entweder .call oder .bind zu nennen.

Zum Beispiel:

// if you are calling the function directly this._getList().call(this)

oder

// if you are passing the function off for another function to execute it this._getList.bind(this)