事件監聽器 beforeunload 在 useEffect 中未洗掉，為什么會發生？
import React, { useState, useEffect, FC } from 'react';
const beforeUnloadListener = (event: any) => {
event.preventDefault();
return (event.returnValue = 'Are you sure you want to exit?');
};
const OnClosePageDetector: FC = () => {
useEffect(() => {
window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
return (): void => {
window.removeEventListener('beforeunload', beforeUnloadListener);
};
}, []);
return <div></div>;
};
export default OnClosePageDetector;uj5u.com熱心網友回復：
從添加事件偵聽器中洗掉 capture: true 或在洗掉事件偵聽器中添加相同的內容。
此外，OP 沒有系結該功能。在記憶體中，由于提供的選項不同，add 和 remove 都可能指向不同的位置。
添加事件偵聽器和洗掉事件偵聽器采用相同的引數來處理特定事件。當我們使用捕獲標志注冊事件偵聽器并在沒有標志的情況下洗掉時，會發生副作用。
參考
uj5u.com熱心網友回復：
解決了，通過洗掉引數
{ capture: true }
uj5u.com熱心網友回復：
您可以將beforeUnloadListener函式放在給定的函式內useEffect（根據官方檔案，這是推薦的做法）
import React, { useState, useEffect, FC } from 'react';
const OnClosePageDetector: FC = () => {
useEffect(() => {
const beforeUnloadListener = (event: any) => {
event.preventDefault();
return (event.returnValue = 'Are you sure you want to exit?');
};
window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
return (): void => window.removeEventListener('beforeunload', beforeUnloadListener);
}, []);
return <div></div>;
};
export default OnClosePageDetector;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/504796.html
標籤：javascript 打字稿
上一篇：固定網格導航欄和側邊欄
下一篇：從多個表中選擇相同的多個列