react拖拽组件dnd-kit拖拽事件与点击事件冲突问题解决

记录在拖拽功能中拖拽组件与点击事件冲突，导致点击事件无法触发，点击只会触发拖拽事件。

需求：目前需要在拖拽组件上添加一个功能按钮，点击功能按钮进行编辑删除等操作，但是点击功能按钮无法触发点击事件。

问题复现效果如下：

可以看到点击事件也绑定了，点击按钮，页面上的文字没有却没有更新。

事件捕获用过都不行、寻找了很多办法无果，dnd-kit官方文档给出了Sensors传感器的概念，功能大概意思就是比如鼠标按下拖拽组件需要移动多少个像素才触发拖拽事件、或者是等待多少毫秒触发拖拽事件。

例如我写的传感器如下，鼠标按下需要移动5个像素才激活拖拽事件， 这样当地点击功能按钮时，鼠标没有移动，自然就触发了点击事件。

//拖拽传感器，在移动像素5px范围内，不触发拖拽事件
    const sensors = useSensors(
        useSensor(MouseSensor,{
            activationConstraint: {
                distance: 5, // 按住不动移动5px 时 才进行拖拽, 这样就可以触发点击事件
            },
        })
    )

传感器如何应用：应用起来也非常简单，在DndContext标签上加个sensors属性就应用好了

import {DndContext,useSensors,useSensor,MouseSensor} from "@dnd-kit/core";
import {Droppable} from "./Droppable";
import {Draggable} from "./Draggable";


function App() {
  return (
    <DndContext sensors={sensors}>
      <Draggable /> //拖拽组件
      <Droppable /> //可落下的容器组件
    </DndContext>
  )
}

dnd-kit拖拽组件的使用方法在我上一篇文章中https://blog.csdn.net/A15029296293/article/details/134141264。

解决后效果如下：