React+Chakra UI中showSearch为true时输入框无法聚焦问题求助

云原生阿岚

2026-6-21

问题分析与解决方案

你的问题核心是Chakra UI的Input组件未在showSearch为true时正确获取焦点，原因大概率是DOM渲染时机不匹配或ref未正确绑定到底层原生input元素，以下是针对性解决方案：

可能的原因排查

检查控制台输出的searchInputRef.current：如果为null，说明ref未正确绑定到Input的底层原生元素；
确认showSearch是否控制该form/Input的条件渲染（比如{showSearch && <form>...</form>}）：如果是，useEffect执行时Input可能还未完成挂载，导致ref.current为null；
检查Input是否通过CSS（如display:none、visibility:hidden）隐藏：元素不可见时调用focus()不会生效。

解决方案

方案1：使用`useLayoutEffect`替代`useEffect`

useLayoutEffect会在DOM更新完成后同步执行，能确保Input已完成挂载，ref.current可被正确获取：

import { useLayoutEffect } from 'react';

// ...

useLayoutEffect(() => {
  if (showSearch && searchInputRef.current) {
    searchInputRef.current.focus();
  }
}, [showSearch]);

方案2：条件渲染时使用`autoFocus`属性

如果showSearch控制Input的条件渲染（即Input仅在showSearch为true时才被渲染），直接给Input添加autoFocus属性即可：

<Input
  // 其他原有属性
  ref={searchInputRef}
  autoFocus={showSearch}
/>

注意：该方法仅在组件首次挂载时生效，若Input是一直存在仅通过CSS显示/隐藏，此方法无效。

方案3：强制获取底层原生input元素

若ref绑定的是Chakra UI组件实例而非原生input，可通过DOM查询获取底层元素并聚焦：

useEffect(() => {
  if (showSearch && searchInputRef.current) {
    // 查找底层原生input元素
    const nativeInput = searchInputRef.current.querySelector('input');
    nativeInput?.focus();
  }
}, [showSearch]);