如何为ShadcnUI下拉菜单实现仅展开时生效的快捷键？

问题背景 #

你基于ShadcnUI实现了带快捷键的下拉菜单，将内容封装为<DropdownContentHere />组件，但目前全局keydown事件无论菜单是否展开都会触发，需要限制为仅菜单展开时生效。

解决方案 #

ShadcnUI的DropdownMenu基于Radix UI构建，我们可以通过useDropdownMenu钩子获取菜单的展开状态（open），以此控制keydown事件的监听时机：

1. 引入状态钩子
   在<DropdownContentHere />组件中导入Radix UI提供的useDropdownMenu钩子：

import { useDropdownMenu } from '@/components/ui/dropdown-menu' // 路径根据你的项目实际情况调整

2. 调整事件监听逻辑
   通过useDropdownMenu获取菜单展开状态，仅当菜单展开时添加keydown监听，收起时自动移除：

const { open } = useDropdownMenu()

const handleKeyPress = useCallback((event) => {
  // 这里可保留你的快捷键匹配逻辑，比如根据按键触发对应选项操作
  console.log(`Key pressed: ${event.key}`);
}, []);

useEffect(() => {
  // 菜单未展开时直接返回，不添加监听
  if (!open) return;

  document.addEventListener("keydown", handleKeyPress);

  // 组件卸载或菜单收起时移除监听
  return () => {
    document.removeEventListener("keydown", handleKeyPress);
  };
}, [handleKeyPress, open]);

3. 修正代码小问题（可选）
   你原代码中DropdownMenuCheckboxItem的key值使用了未定义的view.label，建议改为option.label避免渲染错误：

<DropdownMenuCheckboxItem
  key={`view-${option.label}`} // 修正key值
  checked={selectedView === option.label}
  onClick={() => handleChangeOption(option.label, option.path)}
>

完整修改后的<DropdownContentHere />组件 #

import { useDropdownMenu } from '@/components/ui/dropdown-menu'
import { DropdownMenuContent, DropdownMenuGroup, DropdownMenuCheckboxItem, DropdownMenuShortcut } from '@/components/ui/dropdown-menu'
import { useCallback, useEffect } from 'react'

const DropdownContentHere = ({ options, selectedView, handleChangeOption }) => {
  const { open } = useDropdownMenu()

  const handleKeyPress = useCallback((event) => {
    // 示例：匹配快捷键并执行对应选项操作
    const targetOption = options.find(opt => opt.shortcut === event.key)
    if (targetOption) {
      handleChangeOption(targetOption.label, targetOption.path)
    }
    console.log(`Key pressed: ${event.key}`);
  }, [options, handleChangeOption]);

  useEffect(() => {
    if (!open) return;

    document.addEventListener("keydown", handleKeyPress);

    return () => {
      document.removeEventListener("keydown", handleKeyPress);
    };
  }, [handleKeyPress, open]);

  return (
    <DropdownMenuContent className="w-56 p-4 bg-nn-0 rounded-xl">
      <DropdownMenuGroup>
        {options.map((option) => (
          <DropdownMenuCheckboxItem
            key={`view-${option.label}`}
            checked={selectedView === option.label}
            onClick={() => handleChangeOption(option.label, option.path)}
          >
            <span className="font-normal">{option.label}</span>
            <DropdownMenuShortcut>{option.shortcut}</DropdownMenuShortcut>
          </DropdownMenuCheckboxItem>
        ))}
      </DropdownMenuGroup>
    </DropdownMenuContent>
  )
}

export default DropdownContentHere

原理说明 #

useDropdownMenu钩子会实时返回当前DropdownMenu的open状态（布尔值），我们通过useEffect监听该状态变化：

• 当菜单展开（open=true）时，挂载全局keydown监听
• 当菜单收起（open=false）时，自动移除监听，避免无意义的事件触发

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