使用 React-Konva 删除节点上的函数错误

Question

所以我用我最近的问题更新了我以前的 react-konva 示例代码：https://codesandbox.io/s/react-konva-drag-and-drop-image-with-delete-button-on-tranform-6977j?file=/src/Draganddrop.js

我正在尝试向选中时可见的每个图像添加一个删除按钮，单击时删除从舞台和我最终将用于保存和加载状态的图像数组中选择的图像。我已经设法添加了红色圆圈并将其用作删除按钮，但我似乎无法将其移动到每个图像的右上角或在红色圆圈的中心添加一个白色十字。

删除函数本身会从图像数组中删除所选图像并从舞台中删除节点，但有时似乎会从舞台中删除多张图像，即使它只从数组中删除所选图像。我需要它只删除从舞台上选择的图像，我目前正在使用 UseRef 来识别它，我做错了吗有没有更好的方法来确保它只删除选定的图像？

Answer 1

您应该重写这部分代码：

const onDeleteImage = (node) => {
    const newImages = [...images];
    newImages.splice(node.index, 1);
    setImages(newImages);
};

在处理您的状态时尽量不要使用 Konva 实例。 node.index 可能不等于您在该州的图像索引。因为你可能在 canvas 上有很多元素，而不仅仅是图像（在你的例子中，你也有转换器）。它影响 Konva 指数。相反，您应该使用来自州的索引；

const onDeleteImage = (index) => {
    const newImages = [...images];
    newImages.splice(index, 1);
    setImages(newImages);
};

// in jsx
{images.map((image, index) => {
  return (
    <URLImage
      onDelete={() => onDeleteImage(index)}
    />
  );
})}

使用 React-Konva 删除节点上的函数错误

Delete function bug on a node using React-Konva

reactjs

konvajs

konvajs-reactjs

react-konva

konva