如何覆盖dnd-kit拖拽组件的键盘默认行为？

@dnd-kit的默认KeyboardSensor内部已对空格（Space）和回车键（Enter）做了原生事件处理，且会阻止事件冒泡，仅重写activators无法拦截这两个按键的事件流——默认处理逻辑优先级更高。

解决方案：重写handleKeyDown方法 #

直接覆盖KeyboardSensor的handleKeyDown方法，自定义按键行为：

import { KeyboardSensor as LibKeyboardSensor } from '@dnd-kit/core';

export class CustomKeyboardSensor extends LibKeyboardSensor {
  handleKeyDown(event) {
    // 拦截空格与回车键
    if (event.key === ' ' || event.key === 'Enter') {
      event.preventDefault();
      // 写入你的自定义逻辑，例如：
      console.log('触发空格/回车自定义操作');
      return; // 终止默认拖拽触发逻辑
    }

    // 其余按键保留默认处理
    super.handleKeyDown(event);
  }
}

配置使用自定义Sensor #

在DndProvider中替换默认的KeyboardSensor：

import { DndProvider, useSensor } from '@dnd-kit/core';
import { CustomKeyboardSensor, MouseSensor } from './sensors';

function App() {
  const sensors = [useSensor(MouseSensor), useSensor(CustomKeyboardSensor)];

  return (
    <DndProvider sensors={sensors}>
      {/* 你的拖拽组件内容 */}
    </DndProvider>
  );
}

为什么重写activators无效？ #

默认KeyboardSensor的activators仅用于判断是否激活Sensor，但其内部handleKeyDown方法已直接处理空格和回车，并调用event.preventDefault()截断了事件流，导致自定义activator无法捕获这些按键事件。

内容的提问来源于stack exchange，提问作者Ali