React Konva中如何拖拽Group并将新位置保存到状态？

问题原因 #

你遇到的异常是因为使用了受控组件模式（通过state控制Group的x/y），但仅在onDragEnd时更新state，导致拖拽过程中Konva内部的Group位置与你的state不同步。当组件重新渲染时，旧的state会把Group位置重置，产生跳动异常。

两种解决方案 #

方案1：非受控模式（推荐，简单流畅） #

直接让Konva处理Group的拖拽逻辑，无需用state控制x/y，仅在onDragEnd事件中获取最终位置：

import { useState } from "react";
import { Stage, Layer, Group, Rect, Line } from "react-konva";

export default function App() {
  // 如需保存位置到state，可初始化
  const [groupPos, setGroupPos] = useState({ x: 50, y: 50 });

  const handleDragEnd = (e: any) => {
    const newPos = e.target.position();
    // 获取拖拽后的新位置
    console.log("拖拽结束，新位置：", newPos.x, newPos.y);
    // 保存到state（按需使用）
    setGroupPos(newPos);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group draggable onDragEnd={handleDragEnd}>
          <Rect x={0} y={0} width={100} height={100} fill="blue" />
          <Line
            points={[0, 0, 100, 100]}
            stroke="black"
            strokeWidth={2}
          />
        </Group>
      </Layer>
    </Stage>
  );
}

方案2：受控模式（适合需实时同步位置到state的场景） #

通过onDragMove实时更新state，保持Group位置与state同步，避免异常：

import { useState } from "react";
import { Stage, Layer, Group, Rect, Line } from "react-konva";

export default function App() {
  const [position, setPosition] = useState({ x: 50, y: 50 });

  const handleDragMove = (e: any) => {
    // 实时同步Group位置到state
    const newPos = e.target.position();
    setPosition(newPos);
  };

  const handleDragEnd = (e: any) => {
    const newPos = e.target.position();
    console.log("拖拽结束，新位置：", newPos.x, newPos.y);
    // 按需再次确认位置（onDragMove已同步，可选）
    setPosition(newPos);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group
          draggable
          x={position.x}
          y={position.y}
          onDragMove={handleDragMove}
          onDragEnd={handleDragEnd}
        >
          <Rect x={0} y={0} width={100} height={100} fill="orange" />
          <Line
            points={[0, 0, 100, 100]}
            stroke="black"
            strokeWidth={2}
          />
        </Group>
      </Layer>
    </Stage>
  );
}

关键说明 #

• 非受控模式下，Konva自动处理位置更新，拖拽体验和蓝色矩形一致，同时能在onDragEnd中获取准确的最终位置。
• 受控模式下，必须通过onDragMove实时同步state与Group位置，否则会出现位置跳动的异常。

内容的提问来源于stack exchange，提问作者Salaz Numpt