在反應流中平移時如何將光標設置為“抓取”？

Question

我正在使用 react-flow，用戶可以通過在背景上單擊和拖動來平移。 我希望光標在背景上懸停時為“抓取”，當用戶按下鼠標按鈕並拖動/平移時，光標為“抓取”。

什么工作：

通過在ReactFlow上設置樣式，我已經能夠在將鼠標懸停在背景上時將光標“抓取”，如下所示：

<ReactFlow
      style={{ cursor: "grab" }}
      ...

什么不起作用：

在背景上按住鼠標按鈕時，我無法讓光標“抓取”。

我試過的：

我已經嘗試根據這樣的mouseDown狀態變量有條件地設置光標： style={{ cursor: mouseDown ? 'grabbing' : 'grab' }} style={{ cursor: mouseDown ? 'grabbing' : 'grab' }}

但是由於某種原因，mouseDown/mouseUp 事件不會在鼠標懸停在背景上時觸發，即使它們在單擊其他元素時觸發。 這是我嘗試這樣做的方法：

  const [mouseDown, setMouseDown] = useState(false);

  const handleMouseDown = () => {
    setMouseDown(true);
    console.log('mouse down');
  };

  const handleMouseUp = () => {
    setMouseDown(false);
    console.log('mouse up');
  };

  useEffect(() => {
    window.addEventListener('mousedown', handleMouseDown);
    window.addEventListener('mouseup', handleMouseUp);
    return () => {
      window.removeEventListener('mousedown', handleMouseDown);
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, []);

這是一個代碼框示例，其中光標正確設置為“grab”，但未設置為“grabbing”（請參閱src/Flow.js文件）：

Answer 1

而是將偵聽器添加到窗口如何使用反應流的事件 api 代替？ 如果您右鍵單擊，您的代碼將完美運行。 也許反應流對鼠標左鍵做 stopPropagation()

<ReactFlow
  style={{ cursor: mouseDown ? "grabbing" : "grab" }}
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  onInit={onInit}
  fitView

  onMoveStart={handleMouseDown} 
  onMoveEnd={handleMouseUp}
>