React中div的onKeyDown事件需点击后才触发的解决方法咨询

嘿，我来帮你解决这个问题～

出现这种情况的核心原因是：div元素默认不属于可聚焦元素，哪怕你给它加了tabIndex="-1"，组件刚加载完成时它也不会自动获得焦点——而键盘事件onKeyDown只有在元素处于聚焦状态时才会被触发，所以你得点击div让它聚焦后才能响应键盘事件。

要解决这个问题，我们只需要让这个div在组件挂载完成后自动获得焦点就行，具体步骤如下：

• 给目标div创建一个React ref，用来获取它的DOM实例
• 使用useEffect钩子，在组件挂载完成后调用ref对象的focus()方法，让div自动聚焦

直接看代码示例会更清楚：

import { useRef, useEffect } from 'react';

function YourComponent() {
  // 创建ref关联到目标div
  const maskWrapperRef = useRef(null);

  // 组件挂载后自动让div聚焦
  useEffect(() => {
    maskWrapperRef.current?.focus();
  }, []);

  // 你的事件处理函数（保持原来的逻辑就行）
  const zoomHandler = (e) => {
    // 你的缩放逻辑
  };
  const mouseMoveHandler = (e) => {
    // 你的鼠标移动逻辑
  };
  const mouseDownHandler = (e) => {
    // 你的鼠标按下逻辑
  };
  const mouseUpHandler = (e) => {
    // 你的鼠标抬起逻辑
  };
  const keyDownHandler = (e) => {
    // 你的键盘按下逻辑
    console.log('键盘事件触发了！', e.key);
  };

  return (
    <div
      ref={maskWrapperRef}
      className="maskWrapper"
      onWheel={zoomHandler}
      onMouseMove={mouseMoveHandler}
      onMouseDown={mouseDownHandler}
      onMouseUp={mouseUpHandler}
      onKeyDown={keyDownHandler}
      tabIndex="-1"
    >
      {/* 这里放你的div内容 */}
    </div>
  );
}

这样修改后，组件一加载完成，这个div就会自动获得焦点，onKeyDown事件就能直接被触发了，不需要再手动点击div。

另外补充一点：你设置的tabIndex="-1"是很合适的，它能让元素支持聚焦，但不会被tab键选中，不会干扰页面原本的tab导航逻辑。如果之后div因为用户操作失去了焦点，你可以根据业务需求，在合适的时机再次调用focus()方法让它重新聚焦，或者考虑监听全局键盘事件（不过全局事件要注意清理，避免内存泄漏）。

备注：内容来源于stack exchange，提问作者Kimor