如何为多个TouchableOpacity复用onPress并识别GridView选中产品项

你遇到的核心问题就是没有把当前点击的产品数据传递给点击处理方法，只需要在TouchableOpacity的onPress里把当前item作为参数传进去就行，具体修改如下：

1. 修改点击事件的参数传递 #

把原来的onPress={this.onPressStone}改成箭头函数包裹的形式，直接把当前渲染的item传递给处理方法：

return (
  <GridView
    itemDimension={130}
    items={this.state.dataSource}
    style={styles.gridView}
    renderItem={item => (
      <View style={styles.itemContainer}>
        <TouchableOpacity 
          onPress={() => this.onPressStone(item)} // 关键：传递当前产品数据
          style={styles.itemTouchable}
        >
          {/* 这里放你的产品UI，比如图片、名称等 */}
          <Text style={styles.itemText}>{item.productName}</Text>
        </TouchableOpacity>
      </View>
    )}
  />
);

2. 编写接收参数的处理方法 #

在你的组件里定义onPressStone方法，接收传递过来的选中项数据，这样就能精准知道用户点击的是哪款产品了：

// 用箭头函数定义方法，避免this指向问题
onPressStone = (selectedProduct) => {
  // 打印选中的产品数据，方便调试
  console.log('用户选中的产品：', selectedProduct);
  
  // 跳转到详情页的逻辑，比如传递产品ID或完整数据
  // 假设你用React Navigation，可以这样传参
  // this.props.navigation.navigate('ProductDetail', { product: selectedProduct });
}

注意事项 #

如果你的onPressStone是类组件的普通函数（不是箭头函数），记得要在组件的构造函数里绑定this，否则会出现this指向错误：

constructor(props) {
  super(props);
  this.onPressStone = this.onPressStone.bind(this);
}

这样修改后，每次点击GridView的单元格，你都能拿到对应的产品数据，不管是做调试还是跳转到详情页传递参数都完全没问题啦～

内容的提问来源于stack exchange，提问作者vishal dharankar