如何识别双击的React自定义CustomCard组件？

几种可行方案： #

• 直接传递标识参数（最推荐）
  跳过事件对象的麻烦，绑定事件时直接把卡片的唯一标识传进处理函数：

  <CustomCard 
    id={playlist.ID} 
    key={playlist.date} 
    onDoubleClick={() => goToPlaylist(playlist.ID)}
  >
  

  对应的处理函数直接接收参数即可：

  function goToPlaylist(playlistId) {
    // 这里直接拿到双击卡片的ID，处理后续逻辑
    console.log('双击卡片ID：', playlistId);
  }
  

• 利用事件的currentTarget属性
  事件的target是实际触发点击的子元素（比如你看到的img），而currentTarget才是绑定事件的CustomCard根DOM节点，它会携带你设置的id：

  function goToPlaylist(event) {
    const playlistId = event.currentTarget.id;
    console.log('双击卡片ID：', playlistId);
  }
  

  注意：如果CustomCard是自定义高阶组件，需要确保它把id属性透传到根DOM元素上，否则拿不到。

• 用data属性存储额外信息
  如果需要更多标识信息（比如你原本想用的key对应的date），可以用HTML自定义data属性：

  <CustomCard 
    id={playlist.ID} 
    key={playlist.date}
    data-date={playlist.date}
    onDoubleClick={goToPlaylist}
  >
  

  处理函数中通过dataset获取：

  function goToPlaylist(event) {
    const playlistId = event.currentTarget.id;
    const playlistDate = event.currentTarget.dataset.date;
    console.log('双击卡片：', playlistId, playlistDate);
  }
  

额外说明： #

React的key是内部用于列表渲染的标识，不会渲染到DOM节点上，所以永远无法从事件对象中获取key，建议用id或自定义data属性来标识组件。

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