React中实现通过上下箭头键导航<dl>列表<dd>元素的方案咨询

核心思路 #

通过监听键盘的ArrowUp和ArrowDown事件，手动控制焦点在<dd>内的按钮间切换，可选择保留原有Tab导航功能或替换为箭头导航。

具体实现步骤 #

• 获取所有需要导航的按钮元素集合
• 为按钮绑定键盘按下事件，判断上下箭头按键触发时机
• 计算当前焦点按钮的索引，根据箭头方向确定下一个要聚焦的按钮
• 处理边界情况（如第一个按钮按上箭头跳转到最后一个，最后一个按向下箭头跳转到第一个）

代码示例（React） #

import { useEffect, useRef } from 'react';

function App() {
  const buttonRefs = useRef<HTMLButtonElement[]>([]);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // 仅响应上下箭头键
      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;

      // 定位当前获得焦点的按钮索引
      const currentIndex = buttonRefs.current.findIndex(btn => btn === document.activeElement);
      if (currentIndex === -1) return;

      e.preventDefault(); // 阻止默认页面滚动行为
      const totalButtons = buttonRefs.current.length;
      let nextIndex;

      if (e.key === 'ArrowUp') {
        // 上箭头逻辑：到顶部则循环至最后一个按钮
        nextIndex = currentIndex === 0 ? totalButtons - 1 : currentIndex - 1;
      } else {
        // 下箭头逻辑：到底部则循环至第一个按钮
        nextIndex = currentIndex === totalButtons - 1 ? 0 : currentIndex + 1;
      }

      // 切换焦点到目标按钮
      buttonRefs.current[nextIndex].focus();
    };

    // 绑定全局键盘事件
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <dl>
      <dt style={{ textAlign: "center" }}>Beast of Bodmin</dt>
      <dd>
        <Button ref={el => el && buttonRefs.current.push(el)}>A large feline inhabiting Bodmin Moor.</Button>
      </dd>

      <dt style={{ textAlign: "center" }}>Morgawr</dt>
      <dd>
        <Button ref={el => el && buttonRefs.current.push(el)}>A sea serpent.</Button>
      </dd>

      <dt style={{ textAlign: "center" }}>Owlman</dt>
      <dd>
        <Button ref={el => el && buttonRefs.current.push(el)}>A giant owl-like creature.</Button>
      </dd>
    </dl>
  );
}

// 自定义Button组件（或直接使用原生button标签）
const Button = ({ children, ref }: { children: React.ReactNode, ref: React.Ref<HTMLButtonElement> }) => {
  return <button ref={ref}>{children}</button>;
};

export default App;

补充说明 #

• 若要仅保留上下箭头导航，可通过动态调整按钮的tabIndex属性实现：非聚焦状态的按钮设为-1，聚焦时恢复为0，同时保证键盘可访问性。
• 不需要循环导航的话，可删除边界处的索引循环逻辑，到达首尾后停止切换。
• 为提升可访问性，建议给聚焦状态的按钮添加明显的样式提示，让用户清晰感知当前焦点位置。

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