React js知道我是否将焦点放在正在查看的页面上。

componentDidMount() {
  window.addEventListener('focus', this.handleFocus);
  window.addEventListener('blur', this.handleBlur);
}

componentWillUnmount() {
  window.removeEventListener('focus', this.handleFocus);
  window.removeEventListener('blur', this.handleBlur);
}

constructor(props) {
  super(props);
  this.state = {
    hasFocus: false,
  };
}

handleFocus = () => {
  this.setState({ hasFocus: true });
}

handleBlur = () => {
  this.setState({ hasFocus: false });
}

render() {
  const { hasFocus } = this.state;

  return (
    <div>
      {hasFocus ? '焦点在当前页面' : '焦点不在当前页面'}
    </div>
  );
}