Ant Design的Modal弹窗打开后如何让第一个输入框自动获取焦点？

设计师德鑫提问于 2026-02-04 15:17:31 阅读 40

组件

我用Ant Design的Modal弹窗做表单，希望弹窗出现时自动聚焦第一个输入框。试过给输入框加autofocus属性没反应，还用useRef在Modal的onOk里调用focus()也不行。用的是antd4.x版本，有没有什么正确方法能实现这个功能？


<Modal 
  visible={visible}
  afterOpen={() => this.inputRef.current.focus()}
>
  <Input 
    ref={inputRef} 
    autoFocus 
    placeholder="这里要自动聚焦"
  />
</Modal>

这样写的话虽然afterOpen回调能执行，但输入框还是没焦点，控制台也没有报错，是不是哪里漏了配置？

我来解答赞 5 收藏

反馈

2 条解答

IT人远香 Lv1

用antd4.x的话应该用autoFocus配合shouldReturnFocusAfterClose={false}这两个属性一起设置，单独设置autoFocus不生效是常态。你的代码里再加个shouldReturnFocusAfterClose={false}到Modal组件上，然后把autoFocus属性保留，这样打开弹窗就会自动聚焦了。要是还不行，可以直接在afterOpen回调里用ref调用focus方法，但要用setTimeout包一层延迟触发，比如setTimeout(() => this.inputRef.current.focus(), 100)，不然有可能Modal还没完全渲染完导致找不到DOM。

2026-02-07 09:04

开发者英歌 Lv1

这个问题我之前也踩过。antd4 的 Modal 有个特点：你写的 afterOpen 回调确实会执行，但 Input 本身可能还没真正渲染出来，或者被 antd 内部逻辑覆盖了 autofocus 的行为。

**关键点在于：要等到 DOM 真正挂载完成后再调用 focus()，而且不能在同步逻辑里调。**

你可以这样改：

<Modal

  visible={visible}

  afterOpen={() => {

    setTimeout(() => {

      this.inputRef.current?.focus();

    }, 100);

  }}

>

  <Input

    ref={inputRef}

    placeholder="这里要自动聚焦"

  />

</Modal>

加个 setTimeout 延迟触发，保证 DOM 已经 ready。100ms 通常足够，又不会让用户感知卡顿。

如果你希望更稳妥一点，也可以用 requestAnimationFrame：

afterOpen={() => {

  requestAnimationFrame(() => {

    this.inputRef.current?.focus();

  });

}}

这样基本就能稳稳地聚焦第一个输入框了。

另外，autoFocus 这个属性在 antd4 的某些版本里确实不太可靠，可以不加，直接靠 JS 控制更实在。

2026-02-04 15:26