react-dnd monitor.getItem() 总是等于悬停的项目

编程问答 2022-05-16

问题描述

为了制作一个 2d 可重组列表，我设置了以下示例。

https://codesandbox.io/s/wizardly-cerf-4zpkt?file=/src/DragableItem.js:696-746

然而，悬停在组件上的是总是悬停的组件。这意味着没有办法移动任何东西，因为它总是会放在自己身上。有没有办法解决这个问题？

要复制，请将 9 个框中的任何一个拖到其他框上。

解决方法

示例代码和框有两个错误。

  1. hover 方法的第一个参数是拖动项，而不是悬停项。
  2. 悬停的项目是调用 useDrop 的当前项目。另一种思考方式是悬停项调用了useDrop的hover方法，所以你已经知道悬停项了。

这是带有更正的代码和框。 https://codesandbox.io/s/blazing-browser-3h47r?file=/src/DragableItem.js

,

在悬停方法中添加此 monitor.isOver({ shallow: true }); 代码。

像这样：

hover(item,monitor) {
    monitor.isOver({ shallow: true });
    //your code here
}
react-dnd