Ich habe eine Website in ReactJS. Ich möchte einen Rückruf erhalten, wenn meine Registerkarte scharfgestellt oder ausgeblendet ist. Ich bin dafür auf die Page Visibility API gestoßen, kann aber nicht herausfinden, wie sie in ReactJS verwendet wird.

In welcher Lebenszyklusmethode registriere ich den Rückruf dafür?

31
Pravesh Jain 18 Apr. 2018 im 17:52

4 Antworten

Beste Antwort

Das sollte funktionieren:

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

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

onFocus = () => {
    //
}

Bearbeiten: Gleiches gilt für "Unschärfe" und sollte funktionieren, wenn die Registerkarte ausgeblendet wird.

Überprüfen Sie die Antwort von @ Assaf auf die Verwendung mit Hooks.

11
Ali Ankarali 4 März 2019 im 11:39

Bauen Sie dies einfach mit Haken ab React 16.8

import React, { useEffect } from 'react';

// User has switched back to the tab
const onFocus = () => {
  console.log('Tab is in focus');
};

// User has switched away from the tab (AKA tab is hidden)
const onBlur = () => {
  console.log('Tab is blurred');
};

const WindowFocusHandler = () => {
  useEffect(() => {
    window.addEventListener('focus', onFocus);
    window.addEventListener('blur', onBlur);
    // Specify how to clean up after this effect:
    return () => {
      window.removeEventListener('focus', onFocus);
      window.removeEventListener('blur', onBlur);
    };
  });

  return <></>;
};

export default WindowFocusHandler;
7
Assaf 22 Feb. 2019 im 05:42

Es gibt keine zuverlässige Methode, um dies zu überprüfen. Sie müssen daher nur wenige Methoden miteinander kombinieren. Hier ist der Kontext für React-Hooks

import React, { useState, useEffect } from 'react'

export const WindowContext = React.createContext(null)

export const WindowContextProvider = props => {
  const [windowIsActive, setWindowIsActive] = useState(true)


  function handleActivity(forcedFlag) {
    if (typeof forcedFlag === 'boolean') {
      return forcedFlag ? setWindowIsActive(true) : setWindowIsActive(false)
    }

    return document.hidden ? setWindowIsActive(false) : setWindowIsActive(true)
  }

  useEffect(() => {
    document.addEventListener('visibilitychange', handleActivity)
    document.addEventListener('blur', () => handleActivity(false))
    window.addEventListener('blur', () => handleActivity(false))
    window.addEventListener('focus', () => handleActivity(true))
    document.addEventListener('focus', () => handleActivity(true))

    return () => {
      window.removeEventListener('blur', handleActivity)
      document.removeEventListener('blur', handleActivity)
      window.removeEventListener('focus', handleActivity)
      document.removeEventListener('focus', handleActivity)
      document.removeEventListener('visibilitychange', handleActivity)
    }
  }, [])

  return <WindowContext.Provider value={{ windowIsActive }}>{props.children}</WindowContext.Provider>
}
3
RTW 29 Nov. 2019 im 19:27

Diese Bibliothek gefunden. Es könnte hilfreich sein ... https://www.npmjs.com/package/react-page-visibility Hier ist, wie ich es verwenden würde, um Ihr Problem zu lösen

import React from 'react;
import PageVisibility from 'react-page-visibility';

class YourComponent extends React.Component {
    state = {
      isWindowInFocus: true,
    }
    componentDidMount() {
      const { isWindowInFocus } = this.props;
      if (!isWindowInFocus) {
        // do something
      }
    }

    listentoWindow = isVisible => {
      this.setState({
        isWindowInFocus: isVisible,
      });
    }
    render() {
      return (
        <PageVisibility onChange={this.listentoWindow}>
          <div>
           Your component JSX
          </div>
        </PageVisibility>
      );
    }
}
0
Allan Guwatudde 23 März 2019 im 19:29