React中如何对MUI弹窗内动态渲染的Input自动聚焦

原有逻辑失效是两个必然因素导致的：

• MUI的Dialog默认带入场过渡动画，open状态切换为true的瞬间，对话框还在执行入场动画，内部的OutlinedInput还没完成完整挂载，此时useEffect里触发的focus()调用找不到可交互的输入框DOM，自然不会生效。
• Dialog自带默认焦点管理规则：打开时会主动把焦点抢到对话框根容器上，就算输入框已经挂载，你提前设置的焦点也会被这个默认逻辑覆盖，这也是直接给输入框加autoFocus不生效的核心原因。

不要用硬编码延迟的setTimeout，用组件本身提供的事件钩子实现，完全和组件渲染、动画生命周期对齐，不存在时机错位问题。

方案1：监听动画完成事件触发聚焦（稳定性最高） #

Dialog的TransitionProps提供了onEntered回调，这个钩子只会在对话框入场动画100%执行完成、所有内部子组件全部挂载就绪后触发，此时执行聚焦操作不会有任何时机问题，同时需要关闭Dialog默认的抢焦点逻辑。
直接替换原有代码即可：

const SearchIdDialog: React.FC = () => {
  const [openSearchId, setOpenSearchId] = React.useState<boolean>(false);
  const inputRef = React.useRef<HTMLInputElement>(null);

  const handleClose = () => {
    setOpenSearchId(false);
  };

  // 动画完全结束后再聚焦输入框
  const handleDialogEntered = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <Tooltip title="Click to search">
        <Button
          onClick={() => {
            setOpenSearchId(true);
          }}
        >
          Search
        </Button>
      </Tooltip>

      <BootstrapDialog
        onClose={handleClose}
        open={openSearchId}
        // 关闭Dialog默认聚焦到容器的逻辑，避免抢占输入框焦点
        disableAutoFocus
        // 绑定入场动画完成回调
        TransitionProps={{
          onEntered: handleDialogEntered
        }}
      >
        <SearchStyle
          inputRef={inputRef}
        />
      </BootstrapDialog>
    </div>
  );
};

这个方案是事件驱动的，不管后续你修改动画时长、还是在低端设备上动画执行变慢，都能正常工作，没有硬编码的魔法值。

方案2：透传autoFocus属性（代码最简洁） #

如果不想手动操作ref，可以直接给输入框透传原生autoFocus属性，同样配合关闭Dialog默认的容器聚焦逻辑即可：

<BootstrapDialog
  onClose={handleClose}
  open={openSearchId}
  disableAutoFocus
>
  {/* 注意：需要确保SearchStyle组件会把autoFocus属性向下透传给内部的OutlinedInput/原生input元素 */}
  <SearchStyle
    inputRef={inputRef}
    autoFocus
  />
</BootstrapDialog>

这个方案的生效前提是你自定义的SearchStyle组件没有拦截autoFocus属性，会把它正常传给内部的输入框组件，如果中间做了属性过滤就会失效。

硬编码延迟的本质是靠猜时间等组件渲染完成，只要后续动画配置调整、或者设备性能差异导致动画时长变化，这个逻辑就有概率失效，属于不可靠的临时方案，生产环境不要用。

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