Question

我正在开发我的第一个React Native应用程序，我正在尝试将id设置为一个组件，以便在按下它并根据组件的id显示数据时可以确定此视图

这是我到目前为止所尝试的：

 renderRow(rowData, sectionID, rowID){
  var past_matches_circles =[];
  for(var i=0; i<isPast; i++){
    past_matches_circles.push(
      <TouchableOpacity id={i} key = {i} collapsable={false} style={styles.small_circle} onPress={()=>this.pressOnCircle(rowData[`${i}`].MatchID)}>
      </TouchableOpacity>
    );
  } 
  return (
    <View>
      <View style={{flexDirection:'row'}}>
        {past_matches_circles}
      </View>
      <View style={{flexDirection:'row'}}>
        <Image style={{width:100, height:100, margin:5}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/>
        <View style={{justifyContent:'center', flex:1}}>
          <Text> {rowData[0].MatchDate} </Text>
          <Text> {rowData[0].HomeTeam} VS {rowData[0].AwayTeam} </Text>
        </View>
      </View>
    </View>
  );
}
pressOnCircle(i){
  ToastAndroid.show('key ' + i, ToastAndroid.SHORT);
}

但不幸的是，迭代器i值始终等于循环内的最后一个值，无论我按哪个视图。

任何人都可以帮助我获取组件的ID吗？

Answer 1

几天后，我终于解决了这个问题。而且我会发布这个问题的对象。

我正在将视图推送到我的数组而不返回，因此i的值始终相同。

所以我做了什么：

renderCircle(id) {
  return <TouchableOpacity key={id} style={styles.small_circle} onPress={() => this.pressOnCircle(id)}>
         </TouchableOpacity>;
}
renderRow(rowData, sectionID, rowID){
  var past_matches_circles =[];
  for(var i=0; i<isPast; i++){
    past_matches_circles.push(
      this.renderCircle(i)
    );
  }
  var { page, animationsAreEnabled } = this.state;
  return (
    <View>
      <View style={{flexDirection:'row'}}>
        {past_matches_circles}
      </View>
      <View style={{flexDirection:'row'}}>
        <Image style={{width:100, height:100, margin:5}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/>
        <View style={{justifyContent:'center', flex:1}}>
          <Text> {rowData[0].MatchDate} </Text>
          <Text> {rowData[0].HomeTeam} VS {rowData[0].AwayTeam} </Text>
        </View>
      </View>
    </View>
  );
}

希望这会有所帮助。

Answer 2

您可以使用context创建一个关闭.bind值的新函数。这不是最好的性能，因为您每次都在创建一个新功能。

此外，您可能需要执行类似

的操作

onPress={ this.pressOnCircle.bind(this, i) }>

在构造函数中获取处理程序中正确的this.pressOnCircle = this.pressOnCircle.bind(this);上下文。

React Native：将id设置为组件并获取此组件的id

2 个答案: