当子节点是点击事件目标时，如何在 React 中获取 div 包装器的 ID？

Question

我有一个 div 元素的底部导航列表，每个元素都包含一个 svg 图标。当用户点击一个图标时，我需要给定的 id 属性来设置特定内容呈现的状态。我实际上已经弄明白了，但是内联 svg 的问题是传递的 event.target 是 <div>、<svg> 标记甚至是 <path> 的更下方。我设想了一个解决方案，每当用户单击时，事件总是冒泡到 div.id 并返回以设置为状态。

我需要在每个子节点上手动设置点击处理程序还是有其他方法？

示例：

const Nav = () => {
  return (
    <nav>
      <div id="I-WANT-YOU" onClick={event => whatToDoHere(event)}>
         <svg fill="#systemValue">
           <path ....long path .... />
         </svg>
      </div>
      .... repeat 5 times
    </nav>
  )
}

现在我有一个将 svg 图标设置为 background-image: url('path/here.svg'); 的肮脏解决方案，但内联 svg 图标的目的是，我可以设置用户特定的 fill 值，这是不可能的使用此解决方案。

注意：

是的，我知道 <ul> 和 <li>，我尽量将问题描述得尽可能简单。
我对事件委托的了解有限，我知道普通点击事件侦听器上的 true 参数。 onClickCapture React 文档对我没有帮助。

Answer 1

如果您希望您的 children 向 parent 提供状态，那么您需要传递一个函数供他们在单击时调用。

因此在 parent 中，您使用以下方式维护状态：

const [currentSVG, setCurrentSVG] = useState();

然后当你调用你的 child 元素时，传入一个函数作为 prop。

 <Item id="1" onClick={(id) => setCurrentSVG(id)} name="SVG 1" />

然后在您的 child 中，从 props 中取出函数并将其放在保存您的 svg 的 div 的点击处理程序上。然后onClick，调用你传入的函数：

const Items = ({ onClick, name, id }) => {
  return (
    <StyledSVGDiv onClick={() => onClick(id)}>
      {name}
      <svg width="100" height="100">
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="green"
          strokeWidth="4"
          fill="yellow"
        />
      </svg>
    </StyledSVGDiv>
  );
};

示例：https://oh23w.csb.app/

当子节点是点击事件目标时，如何在 React 中获取 div 包装器的 ID？

How do I get the id of div wrapper in React when childnodes are the click event target?

javascript

svg

event-delegation

reactjs