React怎么實現全屏監聽Esc鍵

今天小編給大家分享一下React怎么實現全屏監聽Esc鍵的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

全屏監聽Esc鍵

全屏與退出全屏

if (isFull) {
      document.exitFullscreen();
    } else {
      tree.current.requestFullscreen();
      tree.current.style.width = '100%'
    }
  };

監聽退出全屏事件

退出方式有兩種：

• 1.通過上面的requestFullscreen。

• 2.通過按esc退出

問題：通過requestFullscreen操作可以修改數據狀態，但當用戶按esc鍵時，是監聽不到的。

采用如下方式： 

const escFunction = () => {
   setFull((prevFill) => !prevFill); 
}
 
useEffect(() => {
    // 監聽退出全屏事件 --- chrome 用 esc 退出全屏并不會觸發 keyup 事件
    document.addEventListener("webkitfullscreenchange", escFunction); /* Chrome, Safari and Opera */
    document.addEventListener("mozfullscreenchange", escFunction); /* Firefox */
    document.addEventListener("fullscreenchange", escFunction); /* Standard syntax */
    document.addEventListener("msfullscreenchange", escFunction); /* IE / Edge */
    return () => {
    //銷毀時清除監聽
      document.removeEventListener("webkitfullscreenchange", escFunction);
      document.removeEventListener("mozfullscreenchange", escFunction);
      document.removeEventListener("fullscreenchange", escFunction);
      document.removeEventListener("MSFullscreenChange", escFunction);
    }
  }, []);

React添加監聽事件 監聽鍵盤事件

react添加監聽事件監聽鍵盤事件

參考：

記錄下確認框confirm代碼：

以上就是“React怎么實現全屏監聽Esc鍵”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。