reactjs - 使用 React-Konva 删除节点上的功能错误

Question

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

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

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

Answer 1

您应该重写这部分代码：

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

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

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

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