javascript - react native onPress 事件不在循环中工作

Question

我的类(class)代码

problem is onPress function give the following error if i use it in the loop

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

nothing happens if i use this line of code

onPress={this.onPressButton}

I know this has to do something with binding which i am not getting kindly help

export default class PlayGame extends Component {

  navigate(routName){
    this.props.navigator.push({
     name:  routName
   })
  }

  onPressButton() {
    alert("You tapped the button!");
  }

  render() {
    //var selectedLetter = Globals.URDU_ALPHABETS[Math.floor(Math.random()*Globals.URDU_ALPHABETS.length)];  //will be used when app is MVP
    //add selected array

    var selectedLetter = Globals.URDU_ALPHABETS[1];
    var randLetters =  shuffle(randomLetters(Globals.URDU_ALPHABETS,selectedLetter));
    playSelectedLetter(selectedLetter.name);      
    return (             
     <View style={{flex: 3,backgroundColor: 'silver', flexDirection: 'column', justifyContent:'space-between', alignItems: 'center'}}>                      
     <View style={{width: 400, height: 8, flex: 1, backgroundColor: 'steelblue'}}  /> 
     <View style={{flex: 3,backgroundColor: 'silver', flexDirection: 'row', justifyContent:'space-between', alignItems: 'center'}}>

     {Object.keys(randLetters).map(function(key,index) {   

       return <TouchableHighlight key={index} letterName={randLetters[key].name} onPress={() => this.onPressButton()} > 
       <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} key={index}><Text key={index} >{randLetters[key].name}</Text></View> 
       </TouchableHighlight>

     }
     )}
     </View>     
     <TouchableHighlight onPress={this.onPressButton}>
     <Text>Button</Text>
     </TouchableHighlight>
     <View style={{width: 0, height: 0, backgroundColor: 'skyblue'}}><Text></Text></View>             
     </View>
  );
}

Answer 1

尝试改变:

Object.keys(randLetters).map(function(key,index) {

到:

Object.keys(randLetters).map((key,index) => {

可以在类构造函数中绑定(bind)，也可以在render中用这两种方式绑定(bind)

{this.onPressButton.bind(this)}        {() => this.onPressButton()}