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

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

• 为焦点和模糊事件添加事件侦听器。
• 如果触发了焦点事件，则选项卡具有焦点。
• 如果触发了模糊事件，则选项卡失去焦点。

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 挂钩，以指示在组件挂载时选项卡处于焦点状态。

在我们的 useEffect 钩子中，我们为焦点和模糊事件添加了事件侦听器。 我们在窗口对象上添加了事件。

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

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

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

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

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

火焰兔

海报 链接