在 React 中处理浏览器选项卡关闭事件

作者

在 React 中处理浏览器选项卡关闭事件

Handle the Browser Tab close event in React

即使在 React 中也要处理浏览器选项卡关闭：

  1. 使用useEffect挂钩添加事件侦听器。
  2. 监听beforeunload事件。
  3. 该beforeunload事件在选项卡即将被卸载时触发。
应用程序.js
import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    const handleTabClose = event => {
      event.preventDefault();

      console.log('beforeunload event triggered');

      return (event.returnValue = 'Are you sure you want to exit?');
    };

    window.addEventListener('beforeunload', handleTabClose);

    return () => {
      window.removeEventListener('beforeunload', handleTabClose);
    };
  }, []);

  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

我们在挂钩中的window对象上添加了一个事件监听器。useEffect

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因此它只会在组件安装时运行。

beforeunload

事件在窗口或选项卡即将被卸载时触发。

文档仍然可见，此时事件仍可取消。

这使我们能够打开一个对话框，询问用户是否真的想离开页面。

用户可以确认并导航到新页面或取消导航。

请注意，不确定事件是否会触发。例如，用户可以在其浏览器设置中禁用弹出窗口。

我们使用
addEventListenerwindow方法在对象
上添加事件侦听器。

该方法采用的第一个参数是要侦听的事件类型，第二个参数是在指定类型的事件发生时调用的函数。

当组件卸载时，我们从useEffect钩子返回的函数被调用。

我们使用
removeEventListener
方法来删​​除我们之前注册的事件监听器。

清理步骤很重要，因为我们要确保我们的应用程序中没有任何内存泄漏。

–

发表评论