使用 React 检查浏览器选项卡是否具有焦点

作者

使用 React 检查浏览器选项卡是否具有焦点

Check if the Browser tab has Focus using React

要使用 React 检查浏览器选项卡是否具有焦点：

  1. focus为和事件添加事件监听器blur。
  2. 如果focus事件被触发，则该选项卡具有焦点。
  3. 如果blur事件被触发，选项卡将失去焦点。
应用程序.js
import {useEffect, useState} from 'react';

export default function App() {
  const [tabHasFocus, setTabHasFocus] = useState(true);

  useEffect(() => {
    const handleFocus = () => {
      console.log('Tab has focus');
      setTabHasFocus(true);
    };

    const handleBlur = () => {
      console.log('Tab lost focus');
      setTabHasFocus(false);
    };

    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);

    return () => {
      window.removeEventListener('focus', handleFocus);
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  return (
    <div>
      {tabHasFocus ? (
        <h2>Tab has focus ✅</h2>
      ) : (
        <h2>Tab does not have focus ⛔️</h2>
      )}
    </div>
  );
}

检查选项卡是否有焦点

我们初始化了一个状态变量来跟踪选项卡是否具有焦点。

我们传递true给
useState挂钩以指示选项卡在组件安装时获得焦点。

在我们的useEffectfocus挂钩中，我们为和事件
添加了事件监听器blur。window我们在对象上添加了事件。

当

标签接收到焦点时，触发焦点事件。

当
标签失去焦点时，触发模糊事件。

我们从useEffect钩子中返回了一个函数。该函数将在组件卸载时调用。

在我们的清理函数中，我们使用removeEventListener方法来删​​除我们之前注册的事件侦听器。

这有助于我们避免在应用程序中出现内存泄漏。

–

发表评论