检查浏览器选项卡是否在ReactJS中处于焦点

小编典典

检查浏览器选项卡是否在ReactJS中处于焦点

reactjs

我在ReactJS中有一个网站。每当我的标签页处于焦点或隐藏状态时，我都希望获得回调。我遇到了页面可见性API，但是我无法弄清楚如何在ReactJS中使用它。

我应该在哪个生命周期方法中注册回调？

阅读 277

2020-07-22

共1个答案

小编典典

这应该工作：

componentDidMount() {
    window.addEventListener("focus", this.onFocus)
}

componentWilUnmount() {
    window.removeEventListener("focus", this.onFocus)
}

onFocus = () => {
    //
}

编辑：“模糊”同样适用，并且在选项卡变为隐藏状态时也应适用。

检查@Assaf的答案是否有钩子。

2020-07-22