Поменяйте курсор на Hover в react-konva

Question

Я использую react-konva для создания UI для приложения. Я хочу, чтобы курсор превращался в указатель при наведении курсора на Rect. Есть документация о том, как это сделать с konva, но не для react-konva. Кто-нибудь может помочь?

Answer 1

Работает очень похоже на демо Konva.

<Rect
  width={50}
  height={50}
  fill="red"
  onMouseEnter={e => {
    // style stage container:
    const container = e.target.getStage().container();
    container.style.cursor = "pointer";
  }}
  onMouseLeave={e => {
    const container = e.target.getStage().container();
    container.style.cursor = "default";
  }}
/>

Демо: https://codesandbox.io/s/react-konva-cursor-style-demo-96in7

Answer 2

Кроме того, вы можете объединить два события:

      const handleCursor = (e: KonvaEventObject<MouseEvent>) => {
   const stage = e.target.getStage();
   if (stage) {
     if (e.type === "mouseenter") {
       stage.container().style.cursor = "pointer";
     } else {
       stage.container().style.cursor = "default";
     }
   }
};

Answer 3

Вы пробовали использовать синтетическое событие onMouseOver и многие другие события.

Проверьте эту ветку, как вы зависаете в ReactJS? - onMouseLeave не регистрируется при быстром наведении