React页面首次加载时自动聚焦中心输入框失效问题如何解决

方案1：结合侧边栏状态+首次聚焦标记（推荐） #

通过增加状态标记控制聚焦逻辑仅执行一次，同时监听侧边栏加载完成的时机，避免焦点被抢占：

• 在state中新增hasInputFocused标记，用于记录是否已经完成过首次聚焦操作
• 在componentDidUpdate中增加双重判断：仅当侧边栏已完成加载、且未完成过首次聚焦时，才执行聚焦逻辑，执行后立即更新标记，避免后续重复触发

示例代码：

// 构造函数中新增状态
constructor(props) {
  super(props);
  this.state = {
    // 你原有控制侧边栏显隐的状态，可根据实际命名调整
    isSidebarOpen: false,
    // 新增：首次聚焦标记
    hasInputFocused: false
  };
}

componentDidUpdate(prevProps, prevState) {
  // 判断条件可根据你侧边栏实际加载完成的时机调整，例如下方为侧边栏完全弹出后触发
  if (this.state.isSidebarOpen && !this.state.hasInputFocused && this.inputBar) {
    this.inputBar.focus();
    this.setState({ hasInputFocused: true });
  }
}

// 原有input的ref逻辑无需修改
<input type="text" ref={(element) => { this.inputBar = element; }} />

方案2：短延迟兜底 #

如果不方便监听侧边栏的加载状态，可以在componentDidMount中增加极短的延迟，等侧边栏抢占焦点的逻辑执行完成后再触发聚焦，用户几乎感知不到延迟：

componentDidMount() {
  // 100ms的延迟可覆盖绝大多数侧边栏弹出的逻辑/动画执行时长
  setTimeout(() => {
    // 可选链避免ref未挂载时报错
    this.inputBar?.focus();
  }, 100);
}

两种方案都只会在页面首次加载时执行一次聚焦逻辑，关闭侧边栏时不会重复触发。

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