方向键监听在React里为啥不生效？

IT人佳佳提问于 2026-03-08 12:16:22 阅读 4

交互

我在用React写一个简单的键盘导航组件，想通过方向键控制焦点移动，但 onKeyDown 事件根本没反应，是哪里写错了吗？

我试过给 div 加 tabIndex，也用了 useCallback 包裹处理函数，但按上下左右键完全没触发，其他按键比如 Enter 倒是可以。

function MyComponent() {
  const handleKeyDown = (e) => {
    if (e.key === 'ArrowDown') {
      console.log('down pressed');
    }
  };

  return (
    <div
      tabIndex={0}
      onKeyDown={handleKeyDown}
      style={{ outline: 'none' }}
    >
      按方向键试试
    </div>
  );
}

我来解答赞 0 收藏

反馈

1 条解答

UX雨帆 Lv1

你这问题太常见了，div没拿到焦点当然不触发。直接这样改：

function MyComponent() {

  const handleKeyDown = (e) => {

    if (e.key === 'ArrowDown') {

      console.log('down pressed');

    }

  };



  return (

    
      tabIndex={0}

      onKeyDown={handleKeyDown}

      style={{ outline: 'none' }}

      autoFocus // 加上这个

    >

      按方向键试试



  );

}

要么加autoFocus，要么手动点一下这个div让它获取焦点。键盘事件必须元素有焦点才会触发。

2026-03-08 13:03