React 16.3中如何用Ref实现元素切换窗口/地址栏时不丢失焦点？

嘿，我看你遇到了两个头疼的问题：一是没法让你的React组件里的div在切换窗口或者点击浏览器地址栏时保持焦点，二是还触发了无限更新循环的错误。我来帮你一步步搞定！

先搞清楚为啥会触发那个错误 #

你当前的代码里，componentDidUpdate每次都会调用focusContainer，而onBlur事件触发时也会调用它，这就形成了死循环：

• 当div失去焦点时，onBlur触发，调用focusContainer让div重新获得焦点
• 焦点变化会导致组件更新，触发componentDidUpdate，又再次调用focusContainer
• 来回往复，最终触发了React的Maximum update depth exceeded（更新深度超过最大值）错误，这就是你截图里问题的根源

解决方案：重构焦点逻辑 + 精准区分焦点丢失场景 #

我们需要调整这几个地方：

• 改用React 16.3推荐的createRef替代旧的字符串refs，更稳定可靠
• 删掉componentDidUpdate里的强制focus调用，避免不必要的循环更新
• 在onBlur事件里做判断：只有当焦点切换到页面内的其他元素时才不管它；如果是切换窗口、点击地址栏这类离开页面的操作，就重新让div获得焦点

修改后的完整代码 #

import React, { Component, createRef } from 'react';

export class Automatic extends Component {
  // 用createRef创建容器的引用，替代旧的字符串refs
  containerRef = createRef();

  componentDidMount = () => {
    // 组件挂载完成后，首次让容器获得焦点
    this.focusContainer();
    // 监听页面可见性变化，当用户切回当前页面时自动重新聚焦
    document.addEventListener('visibilitychange', this.handleVisibilityChange);
  }

  componentWillUnmount = () => {
    // 组件卸载时记得移除监听，防止内存泄漏
    document.removeEventListener('visibilitychange', this.handleVisibilityChange);
  }

  focusContainer = () => {
    // 可选链操作符避免null报错
    this.containerRef.current?.focus();
  }

  handleVisibilityChange = () => {
    // 当页面从隐藏状态变回可见时，重新聚焦容器
    if (document.visibilityState === 'visible') {
      this.focusContainer();
    }
  }

  handleBlur = (e) => {
    // e.relatedTarget是即将获得焦点的元素，如果它为null，说明焦点离开了当前文档（比如地址栏、其他窗口）
    if (!e.relatedTarget) {
      // 用setTimeout延迟执行，让浏览器先完成焦点切换操作，再重新聚焦，避免冲突
      setTimeout(() => {
        this.focusContainer();
      }, 0);
    }
    // 如果relatedTarget存在，说明焦点切换到了页面内的其他元素，你可以根据需求在这里添加额外逻辑
  }

  render = () => {
    return (
      <div
        name='automatic'
        style={{ outline: 'none' }}
        onKeyPress={this.captureInput}
        onBlur={this.handleBlur}
        ref={this.containerRef}
        tabIndex={0}
      >
        {/* 这里放你的组件内容 */}
      </div>
    );
  }
}

关键逻辑解释 #

1. createRef替代旧refs：React 16.3开始推荐使用createRef，比字符串refs更符合现代React的最佳实践，也不容易出问题
2. 页面可见性监听：通过visibilitychange事件，当用户从其他窗口切回来时，自动让容器重新获得焦点，完美解决切换窗口丢焦点的问题
3. onBlur的精准判断：
   • 利用e.relatedTarget判断焦点去向，如果它是null，就说明焦点离开了当前页面（比如点地址栏、切到其他APP），这时候就重新聚焦
   • 加setTimeout是为了让浏览器先处理完当前的焦点切换流程，再执行我们的focus操作，避免和浏览器的默认行为冲突
4. 清理监听：组件卸载时移除visibilitychange监听，防止内存泄漏，这是React开发的好习惯

这样修改后，既解决了无限循环的错误，又能保证你的div在用户切换窗口或点击地址栏后自动重新获得焦点，满足你的需求～

内容的提问来源于stack exchange，提问作者Palaniichuk Dmytro