onClick事件处理程序在React中附加到SVG图标时无法按预期工作

Question

我在当前项目中使用SVG图标作为React组件，并面临下一个问题：

当我点击图标时，它附带了onClick事件处理程序——有时处理程序有效，有时无效。我观察到，这取决于鼠标指针当前放置的位置-如果它将放置在的svg元素上附加了处理程序-它工作，否则-如果鼠标指针放在svg子路径元素上-处理程序不工作。

这是我的图标组件示例：

import React from 'react';
const IconTrash = ({ onClick, style, ...rest }) => {
return (
<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-trash" fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
onClick={onClick}
style={{ ...style, cursor: 'pointer'}}
{...rest}
>
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fillRule="evenodd"
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
);
};
export default IconTrash;

作为临时解决方案，我决定将onClick处理程序附加到所有元素，但我认为这不好。

那么，如何独立地调用处理程序，鼠标指针出现在svg或它的子对象上？

Answer 1

我也遇到了同样的问题。

我曾经在做这件事时遇到过这个问题(方式错误(：

<div className="flex flex-row">
<VscNewFolder
onClick={createNewFolder}
className="w-5 h-5 mr-2 text-gray-400 transform hover:scale-110 hover:bg-gray-700 rounded-sm"
/>
</div>

我可以通过解决这个问题

• 将图标封装在div中
• 设置图标的pointerEvents="none"

结束时看起来像这样：(正确的方式(

<div className="flex flex-row">
<div onClick={createNewFolder}
className="w-5 h-5 mr-2 text-gray-400 transform hover:scale-110 hover:bg-gray-700 rounded-sm">
<VscNewFolder
pointerEvents="none"
className="w-full h-full"
/>
</div>                  
</div>

Answer 2

我认为解决它的最佳方法是将<svg>包装在另一个标记(按钮、span…(中，并将onClick事件添加到包装中。无论如何，一个svg包含了它所有的子代，我不知道你的情况怎么会发生。

如果将onClick传递给svg及其子级，则单击子级时，它将同时触发它们和svg。