how to get sender in TouchableHighlight's onPress

Question

I have a list of Views, each View wrapped by TouchableHighlight, I bind a onPress handler for each Touchable

  ....
  <TouchableHighlight onPress={this._preformTouchItem}>
    <View style={styles.item}>
      <Text>{displayContent}</Text>
    </View>
  </TouchableHighlight>
  ....

_preformTouchItem(event) {
}

I debug it in Chrome Dev Tools, the 'event' doesn't bind the 'sender' object, How to know which View is clicked

Answer 1

In React you would usually not interact with views directly but call setState and have React re-render the UI for you. For example, you would pass the index of the item:

getInitialState: function() {
  var itemToggleStates = [false, false, false];
  return itemToggleStates;
},

render: function() {
  for (i = 0; i < itemToggleStates.length; i++) { 
    ...
    var currentIndex = i;
    var itemText = this.state.itemToggleStates[currentIndex] ? 'yes' : 'no';
    <TouchableHighlight onPress={() => this._handleItemTouch(currentIndex)}>
      <Text>{itemText}</Text>
    </TouchableHighlight>
    ...
  }
  ...
},

_handleItemTouch: function(index) {
  var itemToggleStates = this.state.itemToggleStates;
  itemToggleStates[index] = !itemToggleStates[index];
  setState(itemToggleStates);
}

In rare cases when you really need to access the underlying view, there's a concept called refs.