在 react-konva 中更改 Hover 上的光标

【问题标题】：Change cursor on Hover in react-konva在 react-konva 中更改 Hover 上的光标
【发布时间】：2020-06-24 08:45:12
【问题描述】：

我正在使用 react-konva 为应用程序创建 UI。我想要它，以便在将鼠标悬停在 Rect 上时光标变为指针。有关于如何使用 konva 而不是 react-konva 的文档。有人可以帮忙吗？

【问题讨论】：

标签： javascript reactjs frontend react-konva konva

【解决方案1】：

您是否尝试过使用合成事件 onMouseOver 和许多其他事件。

检查这个线程， How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

【讨论】：

【解决方案2】：

它的工作方式与 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

【讨论】：

【解决方案3】：

另外，您可以合并两个事件：

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";
     }
   }
};

【讨论】：