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

監(jiān)聽退出全屏事件

退出方式有兩種：

1.通過上面的requestFullscreen。
2.通過按esc退出

問題：通過requestFullscreen操作可以修改數(shù)據(jù)狀態(tài)，但當(dāng)用戶按esc鍵時(shí)，是監(jiān)聽不到的。

采用如下方式：

const escFunction = () => {
   setFull((prevFill) => !prevFill); 
}
 
useEffect(() => {
    // 監(jiān)聽退出全屏事件 --- chrome 用 esc 退出全屏并不會(huì)觸發(fā) 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 () => {
    //銷毀時(shí)清除監(jiān)聽
      document.removeEventListener("webkitfullscreenchange", escFunction);
      document.removeEventListener("mozfullscreenchange", escFunction);
      document.removeEventListener("fullscreenchange", escFunction);
      document.removeEventListener("MSFullscreenChange", escFunction);
    }
  }, []);

React添加監(jiān)聽事件監(jiān)聽鍵盤事件

react添加監(jiān)聽事件監(jiān)聽鍵盤事件

參考：

記錄下確認(rèn)框confirm代碼：

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React useCallback使用教程
useCallback是react中比較重要的一個(gè)hook，useCallback 用來返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用
2023-01-01
使用reactjs優(yōu)化了進(jìn)度條頁面性能提高70%
這篇文章主要介紹了使用reactjs優(yōu)化了進(jìn)度條后頁面性能提高了70%的操作技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
解決React報(bào)錯(cuò)Parameter 'props' implicitly&nb
這篇文章主要為大家介紹了React報(bào)錯(cuò)Parameter 'props' implicitly has an 'any' type的解決處理方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
React項(xiàng)目中hook實(shí)現(xiàn)展示對(duì)話框功能
Modal(模態(tài)框)是 web 開發(fā)中十分常見的組件,即從頁面中彈出的對(duì)話框,下面這篇文章主要給大家介紹了關(guān)于React項(xiàng)目中hook實(shí)現(xiàn)展示對(duì)話框功能的相關(guān)資料,需要的朋友可以參考下
2022-05-05
在React項(xiàng)目中使用Eslint代碼檢查工具及常見問題
這篇文章主要介紹了在React項(xiàng)目中使用Eslint代碼檢查工具及常見問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-10-10
實(shí)現(xiàn)React單頁應(yīng)用的方法詳解
今天我們來學(xué)習(xí)React是如何構(gòu)建起一個(gè)單頁應(yīng)用的，React作為目前最流行的前端框架之一，其受歡迎程度不容小覷，從這門框架上我們可以學(xué)到許多其他前端框架所缺失的東西，也是其創(chuàng)新性所在的地方，比如虛擬DOM、JSX等。下面一起來看看。
2016-08-08
ReactJS實(shí)現(xiàn)表單的單選多選和反選的示例
本篇文章主要介紹了ReactJS實(shí)現(xiàn)表單的單選多選和反選的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
原生+React實(shí)現(xiàn)懶加載(無限滾動(dòng))列表方式
這篇文章主要介紹了原生+React實(shí)現(xiàn)懶加載(無限滾動(dòng))列表方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
react+axios實(shí)現(xiàn)github搜索用戶功能(示例代碼)
這篇文章主要介紹了react+axios實(shí)現(xiàn)搜索github用戶功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-09-09
React實(shí)現(xiàn)浮層組件的思路與方法詳解
React?浮層組件（也稱為彈出組件或彈窗組件）通常是指在用戶界面上浮動(dòng)顯示的組件,本文主要介紹了浮層組件的實(shí)現(xiàn)方法,感興趣的小伙伴可以了解下
2024-02-02