Блог

Я использую значки SVG в качестве компонентов React в своем текущем проекте и столкнулся со следующей проблемой:

Когда я нажимаю на значок, к которому прикреплен обработчик события onClick — иногда обработчик работает, иногда нет. Я заметил, что это зависит от того, где в данный момент размещен указатель мыши — если он размещен на элементе svg, к которому прикреплен обработчик — он работает, в противном случае — если указатель мыши размещен на дочернем элементе пути svg — обработчик не работает.

Это пример моего компонента Icon:

 
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 или на его дочернем элементе?

У меня была та же проблема.

Раньше у меня была такая проблема, когда я делал это (НЕПРАВИЛЬНЫЙ ПУТЬ):

 <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>
 

Я думаю, что лучший способ решить эту <svg> проблему — вставить другой тег (button, span, …) и добавить onClick событие в оболочку. В любом случае, an svg содержит все его дочерние элементы, и я не знаю, как может возникнуть ваша ситуация.

Если вы перейдете onClick к svg и его дочерним элементам, когда вы нажмете на дочерние элементы, это вызовет как для них, так и svg .