React实现全屏功能时首次按Escape键无法触发监听事件如何解决

问题根源 #

你遇到的按两次Escape才生效的问题有三个核心原因：

1. 系统全屏状态下，第一次按下Escape会被浏览器默认的「退出系统全屏」逻辑拦截，不会触发你绑定的keydown事件，此时你本地维护的isFullScreen状态和浏览器实际的全屏状态已经不同步
2. 你写的keydown监听回调存在闭包陷阱：useEffect空依赖数组导致回调里拿到的isFullScreen永远是初始值，就算事件触发也无法正确更新状态
3. 你原keydown回调里的setIsFullScreen(isFullScreen)写法是错误的，相当于给状态赋值原值，根本不会触发状态更新

解决方案 #

不要手动监听keydown事件，改用浏览器原生提供的fullscreenchange事件，该事件会在所有全屏状态变更场景（点击按钮切换、按Escape退出、按F11切换等）下触发，能保证本地状态和浏览器实际状态完全同步。

代码修改如下： #

1. 替换useEffect逻辑

useEffect(() => {
  // 监听全局全屏状态变化，自动同步本地状态
  const syncFullscreenState = () => {
    // document.fullscreenElement有值代表当前处于系统全屏状态
    setIsFullScreen(!!document.fullscreenElement);
  };

  document.addEventListener('fullscreenchange', syncFullscreenState);
  
  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    document.removeEventListener('fullscreenchange', syncFullscreenState);
  };
}, []);

2. 简化全屏切换逻辑

不需要手动切换状态，交给fullscreenchange事件自动同步即可，同时处理全屏API的异步异常：

const handleFullScreen = async () => {
  try {
    if (document.fullscreenElement) {
      await document.exitFullscreen();
    } else {
      await document.documentElement.requestFullscreen();
    }
  } catch (error) {
    // 可按需添加全屏操作失败的提示逻辑，例如用户禁止了全屏权限的场景
    console.error('全屏操作失败：', error);
  }
};

兼容说明 #

如果需要兼容旧版本浏览器，可以额外添加带前缀的全屏事件监听：webkitfullscreenchange、mozfullscreenchange、MSFullscreenChange，当前主流浏览器均已支持标准的fullscreenchange事件。

内容的提问来源于stack exchange，提问作者Mehmet Aziz Algüllü