快捷键

快捷键让玩家能够直接通过键盘触发操作，例如快速保存、跳过对话，或控制一个小游戏。与其自行管理 window.addEventListener("keydown", ...) 调用，不如使用 TanStack Hotkeys，这是一个能将键盘输入转换为具有作用域、序列、按住按键和冲突检测功能的类型化命令系统的库。

使用方法复制锚点链接

使用 useHotkey 钩子注册一个快捷键：

import { useHotkey } from "@tanstack/react-hotkeys";

useHotkey("Mod+S", () => {
    quickSave();
});

Mod 修饰键在 macOS 上会自动解析为 Meta（Cmd），在 Windows/Linux 上则解析为 Control，因此同一段代码可以跨平台使用。

作用域限定与条件启用复制锚点链接

useHotkey 是一个钩子，因此它会在组件挂载时注册快捷键，并在组件卸载时自动清理——不同于手动使用 window.addEventListener，你无需自己移除监听器。

使用 target 选项可将快捷键限定在特定元素上，使用 enabled 选项则可根据游戏状态开启或关闭快捷键，例如在小游戏运行期间：

const panelRef = useRef<HTMLDivElement>(null);

useHotkey("Escape", () => closePanel(), { target: panelRef });
useHotkey("ArrowUp", () => setDirection(0, -1), { enabled: !gameOver });

了解更多复制锚点链接

TanStack Hotkeys 还支持按键序列（例如 “G then D”）、按住按键、冲突检测以及开发者工具面板。完整功能集请参阅官方文档。