添加keydown事件后提示box为null，无法显示div求解决

问题根源 #

1. 你在组件外部直接执行document.querySelector(".box")和document.querySelector(".notif")时，App组件还没渲染到DOM中，这两个元素根本不存在，所以返回null。
2. window.onload = document.addEventListener(...)写法错误，addEventListener返回undefined，等于把window.onload设为无效值，起不到监听页面加载的作用。

修正方案 #

在React函数组件里，要用useEffect钩子处理DOM操作和事件监听，确保组件渲染完成后再执行相关逻辑，同时用useRef安全获取DOM元素：

import "./styles.css";
import { useEffect, useRef } from "react";

function App() {
  // 用useRef绑定DOM元素
  const boxRef = useRef(null);
  const notificationRef = useRef(null);

  useEffect(() => {
    const handleKeyDown = () => {
      boxRef.current.classList.add("active");
      notificationRef.current.classList.add("inactive");
    };

    // 添加键盘事件监听
    window.addEventListener("keydown", handleKeyDown);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  return (
    <>
      <div className='notif' ref={notificationRef}>Press Any Key</div>
      <div className='box' ref={boxRef}>
        <h2>20</h2>
        <h1>Shift</h1>
      </div>
    </>
  );
}

export default App;

关键修正点 #

• useRef获取DOM：React会在组件渲染完成后，把真实DOM节点赋值给ref.current，确保拿到的是存在的元素。
• useEffect控制时机：空依赖数组[]保证事件监听只在组件挂载完成后添加一次。
• 清理事件监听：useEffect的返回函数会在组件卸载时执行，移除监听避免内存泄漏。
• 移除无效代码：删掉组件外部的DOM查询和错误的window.onload写法，完全遵循React组件生命周期逻辑。

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