如何关闭react-beautiful-dnd的键盘功能？若不可行如何修改快捷键？

一、完全关闭键盘交互功能 #

react-beautiful-dnd默认同时启用指针和键盘两种拖拽触发方式，要彻底关闭键盘功能，只需让DragDropContext只加载指针传感器即可：

import { DragDropContext, PointerSensor, createSensorContext } from 'react-beautiful-dnd';

// 创建仅包含指针传感器的上下文
const sensorContext = createSensorContext([PointerSensor]);

function App() {
  const handleDragEnd = (result) => {
    // 这里写你的拖拽结束逻辑
  };

  return (
    <DragDropContext sensorContext={sensorContext} onDragEnd={handleDragEnd}>
      {/* 你的拖拽列表/组件放在这里 */}
    </DragDropContext>
  );
}

配置后，键盘的拖拽触发、方向控制等功能都会被禁用，只能通过鼠标/触摸操作拖拽。

二、修改键盘快捷键 #

如果需要保留键盘交互但替换默认快捷键，可自定义键盘传感器的按键绑定规则：

import { DragDropContext, KeyboardSensor, PointerSensor, createSensorContext, defaultKeyboardBindings } from 'react-beautiful-dnd';

// 自定义按键绑定，示例替换方向键为WASD
const customKeyboardBindings = {
  ...defaultKeyboardBindings,
  moveUp: {
    keyCode: 'KeyW',
    code: 'KeyW',
    label: 'W',
  },
  moveDown: {
    keyCode: 'KeyS',
    code: 'KeyS',
    label: 'S',
  },
  moveLeft: {
    keyCode: 'KeyA',
    code: 'KeyA',
    label: 'A',
  },
  moveRight: {
    keyCode: 'KeyD',
    code: 'KeyD',
    label: 'D',
  },
  // 可选：禁用某个默认快捷键，比如取消ESC终止拖拽
  // cancel: null,
};

// 创建包含自定义键盘传感器和指针传感器的上下文
const sensorContext = createSensorContext([
  PointerSensor,
  KeyboardSensor.configure({
    keyboardBindings: customKeyboardBindings,
  }),
]);

function App() {
  const handleDragEnd = (result) => {
    // 你的拖拽结束逻辑
  };

  return (
    <DragDropContext sensorContext={sensorContext} onDragEnd={handleDragEnd}>
      {/* 你的拖拽组件 */}
    </DragDropContext>
  );
}

你可以根据需求修改每个操作对应的按键，比如替换选择、取消、方向控制等快捷键，也可以将特定操作设为null来禁用该按键功能。

内容的提问来源于stack exchange，提问作者emir alp aksungur