FocusManager | TanStack Query Docs

FocusManager

FocusManager 管理 TanStack Query 中的焦点状态。

它可用于更改默认事件侦听器或手动更改焦点状态。

其可用方法有：

setEventListener
subscribe
setFocused
isFocused

focusManager.setEventListener

setEventListener 可用于设置自定义事件侦听器：

tsx

import { focusManager } from '@tanstack/react-query'

focusManager.setEventListener((handleFocus) => {
  // 侦听可见性更改
  if (typeof window !== 'undefined' && window.addEventListener) {
    window.addEventListener('visibilitychange', handleFocus, false)
  }

  return () => {
    // 如果设置了新的处理程序，请务必取消订阅
    window.removeEventListener('visibilitychange', handleFocus)
  }
})

import { focusManager } from '@tanstack/react-query'

focusManager.setEventListener((handleFocus) => {
  // 侦听可见性更改
  if (typeof window !== 'undefined' && window.addEventListener) {
    window.addEventListener('visibilitychange', handleFocus, false)
  }

  return () => {
    // 如果设置了新的处理程序，请务必取消订阅
    window.removeEventListener('visibilitychange', handleFocus)
  }
})

focusManager.subscribe

subscribe 可用于订阅可见性状态的更改。它返回一个取消订阅函数：

tsx

import { focusManager } from '@tanstack/react-query'

const unsubscribe = focusManager.subscribe((isVisible) => {
  console.log('isVisible', isVisible)
})

import { focusManager } from '@tanstack/react-query'

const unsubscribe = focusManager.subscribe((isVisible) => {
  console.log('isVisible', isVisible)
})

focusManager.setFocused

setFocused 可用于手动设置焦点状态。设置 undefined 以回退到默认焦点检查。

tsx

import { focusManager } from '@tanstack/react-query'

// 设置已聚焦
focusManager.setFocused(true)

// 设置未聚焦
focusManager.setFocused(false)

// 回退到默认焦点检查
focusManager.setFocused(undefined)

import { focusManager } from '@tanstack/react-query'

// 设置已聚焦
focusManager.setFocused(true)

// 设置未聚焦
focusManager.setFocused(false)

// 回退到默认焦点检查
focusManager.setFocused(undefined)

选项

focused: boolean | undefined

focusManager.isFocused

isFocused 可用于获取当前焦点状态。

tsx

const isFocused = focusManager.isFocused()

const isFocused = focusManager.isFocused()