React-Dnd：在 useDrop() 中不触发 drop 函数答案

【问题标题】：React-Dnd: drop function not firing in useDrop()React-Dnd：在 useDrop() 中不触发 drop 函数
【发布时间】：2023-02-16 14:31:42
【问题描述】：

我有一个票证组件，其中包含一些应该传输到数据库另一个地方的数据。

const [{ isDragging }, dragref] = useDrag(() => ({
        type: ItemType.TICKET,
        item: {
            // data that should be transferred
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    }));

不幸的是，当我将项目放在目标组件上时，目标组件中的放置处理程序不会触发。

const [{ isOver, canDrop }, dropref] = useDrop(() => ({
        accept: ItemType.TICKET,
        collect: (monitor) => ({
            isOver: monitor.isOver(),
            canDrop: monitor.canDrop(),
        }),
        hover: (item, monitor) => {
             // works fine and prints the correct data
             console.log(item);
             console.log(monitor.canDrop()) // true
        },
        drop: (item) => console.log(item), // <---- doesn't work somehow
    }));

我完全不明白的是，为什么 useDrop Hook 中的悬停侦听器工作得很好，但放置侦听器却不行。

首先，我虽然其他一些 onDrop 或 onDragOver-Listener（从我没有使用 react-dnd 开始）可能会中断它，但即使在删除每一个 onDragOver 和 onDrop Listener 之后，监听器也不会触发。

注意：ofc 我用 DndProvider 和 HTML5Backend 包围了所有内容。在应用程序的整个其他部分，两个挂钩都按预期工作。我正在使用react-dnd 16.0.0

【问题讨论】：

标签： javascript reactjs typescript drag-and-drop react-dnd

【解决方案1】：

我遇到了同样的问题，并且在花了一些时间测试和比较工作部件与其他部件之后。非工作部件。我发现这是因为我在那些非工作部分中有 <img> 元素。只要光标以<img> 元素开头，就永远不会触发drop。所以解决这个问题，你必须添加 draggable="false" 到那些 <img> 元素。

希望能帮助到你。

【讨论】：