如何處理onPress函數反應

Question

我正在使用原生NativeBase組件，並且我有一個調用我的_doStuff函數的問題。我試着打電話給

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

但不斷收到

無法正確讀取的不確定

_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上下文丟失的.MAP循環內。如果您使用ES6，請嘗試使用胖箭頭功能，如下所示。

_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> 
 

 
); 
 
});

如果你不能使用ES6您的項目由於各種原因使用，如下圖所示替代辦法（老校）...

_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

「doStuff」我會做賭注，你_getList功能的情況下做沒有您正在考慮的React Component的上下文。如果您使用的是ES6類，並希望獲得組件上下文的自動綁定，那麼我會建議使用autobind-decorator。如果你決定去這條路線是a nice tutorial on setting it up。

否則，請確保在致電_getList時，請務必使用.call或.bind來致電。

例如：

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

或

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