时间戳

首页 > 解决方案 > 需要检测复杂组件内部的点击并返回组件 ID

javascript - 需要检测复杂组件内部的点击并返回组件 ID

问题描述

我正在使用 react 进行开发，出于性能原因，我想捕获最顶层父级的点击。

const clickHandler = (e) => {
  console.log("clickHandler", e.target) --> give me the child element in which the click occurred
}

所以即使嵌套的孩子我应该能够获得ID。而且会有1000张卡，子结构也很复杂

<div onClick={clickHandler}>

<div class="card" id="12345">
   <div class="x1">
   <div class="x2">
      <div class="">
         <span class="">
         <ul class="">
   </div>
</div>

<div class="card" id="67890">
   <div class="x1">
   <div class="x2">
      <div class="">
         <span class="">
         <ul class="">
   </div>
</div>

</div>

标签： javascripthtmlreactjs

解决方案

如果您想在单击其中的任意位置时获取id具有类的元素的。card

您可以使用.closest查找所需的相关父级。

请记住，这与反应无关，而且它似乎也是一种反模式。

const clickHandler = (e) => {
  const relatedCard = e.target.closest(".card");
  if (relatedCard) {
    console.log("clickHandler", relatedCard.id);
  } else {
    console.log("click happened outside of a .card element");
  }
};

一个更与反应相关的解决方案是将点击处理程序放在该元素而不是容器 div 上并直接使用 id。

<div>

<div class="card" id="12345" onClick={() => clickHandler('12345')}>
   <div class="x1">
   <div class="x2">
      <div class="">
         <span class="">
         <ul class="">
   </div>
</div>

<div class="card" id="67890" onClick={() => clickHandler('67890')}>
   <div class="x1">
   <div class="x2">
      <div class="">
         <span class="">
         <ul class="">
   </div>
</div>

</div>

推荐阅读