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

编程问答 2022-05-30

问题描述

我有一个 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 文档对我没有帮助。

解决方法

如果你想让你的孩子向父母提供状态，那么你需要传递一个函数让他们在点击时调用。

因此，在父级中，您可以通过以下方式维护状态：

const [currentSVG,setCurrentSVG] = useState();

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

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

然后在您的孩子中，从 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/

event-delegationjavascriptreactjsreactjsreactjsreactjssvgsvgsvg