React Native中如何从点击事件获取节点并对比节点是否相同？

嗨，我来帮你搞定这个问题～React Native里的触摸事件对象和Web端的不一样，它不会直接提供DOM节点信息，所以你得换个思路来实现节点对比的需求，这里有两个实用的方法：

方法1：利用Ref直接对比节点引用 #

你已经在TouchableWithoutFeedback上添加了ref，那可以直接通过这个ref存储的引用和其他节点的ref做对比，不用依赖事件对象：

// 假设你有另一个需要对比的节点，比如：
<TouchableWithoutFeedback ref={node => this.anotherNode = node} onPress={...}>
  {/* ... */}
</TouchableWithoutFeedback>

// 修改你的点击处理函数
getNodeInfo() {
  // 直接对比两个ref的引用是否一致
  const isSameNode = this.node === this.anotherNode;
  console.log('是否为同一节点：', isSameNode);
}

render() {
  return (
    <TouchableWithoutFeedback 
      ref={node => this.node = node} 
      onPress={() => this.getNodeInfo()} // 不用传事件对象啦
      style={{zIndex: 0}}
    >
      <View style={styles.wrapper}>
        <ScrollView style={...}>
          {/* ... */}
        </ScrollView>
      </View>
    </TouchableWithoutFeedback>
  )
}

方法2：给节点添加唯一标识（适合动态生成的组件） #

如果你的节点是列表循环生成的（比如FlatList里的项），用ref对比会很麻烦，这时候可以给每个节点绑定一个唯一ID，点击时传递这个ID来判断：

// 假设你有一个数据列表
const items = [
  { id: 'item1', content: '选项1' },
  { id: 'item2', content: '选项2' }
];

// 点击处理函数接收ID
handleItemPress(itemId) {
  // 对比目标ID和当前点击的ID
  const targetId = 'item1'; // 你要对比的目标节点ID
  const isSameItem = itemId === targetId;
  console.log('是否为同一点击对象：', isSameItem);
}

render() {
  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <TouchableWithoutFeedback 
          onPress={() => this.handleItemPress(item.id)}
        >
          <View style={styles.itemWrapper}>
            <Text>{item.content}</Text>
          </View>
        </TouchableWithoutFeedback>
      )}
      keyExtractor={item => item.id}
    />
  )
}

补充说明 #

React Native的触摸事件对象e主要包含触摸坐标、手势状态等信息，没有DOM节点的引用，所以没法直接从事件里拿到节点。用ref或者唯一标识是React生态里更推荐的做法，也更符合React的组件化思想哦～

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