如何处理onPress函数反应

Question

I am using react native with NativeBase components, and I am having a problem calling my _doStuff function. I tried to call

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

but keep receiving

Cannot read properly 'doStuff' of undefined

_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 context is lost inside the .map loop. if you are using ES6, try to use fat arrow functions as shown below.

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

if you cant use ES6 on your project due to various reasons use alternative approach(old school) as shown below...

 _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

I would make a wager that the context of your _getList function does not have the context of the React Component that you are thinking. If you are using ES6 classes and would like to get autobinding of the components context I would suggest using autobind-decorator . If you decide to go that route here is a nice tutorial on setting it up .

Otherwise make sure that when you call _getList make sure to call it with either .call or .bind .

For example:

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

or

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