javascript - 当附加到 React 中的 SVG 图标时，onClick 事件处理程序无法按预期工作

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>