如何为Microsoft Graph Toolkit People Picker设置输入框自动聚焦

可行的实现方案 #

方案1：使用MutationObserver监听DOM渲染（最稳妥，无性能问题）

适合组件渲染层级深、渲染耗时不确定的场景，不会造成无效轮询：

componentDidUpdate(prevProps, prevState) {
  // 仅在mentionStatus刚切换为显示状态时执行逻辑
  if (this.state.mentionStatus && !prevState.mentionStatus) {
    const observer = new MutationObserver((mutations, instance) => {
      const picker = document.getElementById('FocusOnMe');
      if (picker) {
        const targetInput = picker.querySelector('#people-picker-input');
        if (targetInput) {
          targetInput.focus();
          // 找到目标后立即销毁监听器，避免内存泄漏
          instance.disconnect();
        }
      }
    });
    // 可将监听范围缩小到Picker的父容器，进一步降低性能消耗
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
    // 兜底超时：3秒未找到目标则销毁监听器
    setTimeout(() => observer.disconnect(), 3000);
  }
}

方案2：带终止条件的短间隔轮询（实现最简单）

适合快速验证、对性能要求不高的场景：

componentDidUpdate(prevProps, prevState) {
  if (this.state.mentionStatus && !prevState.mentionStatus) {
    let tryTimes = 0;
    const focusTimer = setInterval(() => {
      tryTimes++;
      const targetInput = document.querySelector('#FocusOnMe #people-picker-input');
      // 最多尝试10次，每次间隔100ms，总耗时1秒
      if (targetInput || tryTimes > 10) {
        clearInterval(focusTimer);
        targetInput?.focus();
      }
    }, 100);
    // 组件卸载时记得清空定时器，避免内存泄漏
    this.focusTimer = focusTimer;
  }
}

componentWillUnmount() {
  this.focusTimer && clearInterval(this.focusTimer);
}

方案3：调用组件原生focus方法（仅针对Microsoft Graph Toolkit的People Picker）

你使用的mgt-people-picker本身封装了自动聚焦内部输入框的focus实例方法，无需手动查找深层节点，实现最简单：

componentDidUpdate(prevProps, prevState) {
  if (this.state.mentionStatus && !prevState.mentionStatus) {
    // setTimeout 0将逻辑推入宏任务队列，等待React当前批次渲染完成后执行
    setTimeout(() => {
      document.getElementById('FocusOnMe')?.focus();
    }, 0);
  }
}

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