条件显示输入框时React useRef钩子无法聚焦问题排查

你的代码无法聚焦输入框的核心问题是：React的状态更新是异步的。当你在handleClick中调用setEnableSearch(!enableSearch)后，React不会立刻更新DOM，此时条件渲染的输入框还没有被创建，inputRef.current仍然是null，调用focus()自然不会生效。

要解决这个问题，你需要等到组件重新渲染、输入框已经挂载到DOM之后，再执行聚焦操作。可以通过useEffect监听enableSearch的状态变化来实现：

import { useState, useRef, useEffect } from 'react';

function App() {
  const inputRef = useRef(null);
  const [enableSearch, setEnableSearch] = useState(false);

  const handleClick = () => {
    setEnableSearch(!enableSearch);
  };

  useEffect(() => {
    // 仅当输入框已渲染（enableSearch为true）且ref指向有效DOM元素时，执行聚焦
    if (enableSearch && inputRef.current) {
      inputRef.current.focus();
    }
  }, [enableSearch]); // 依赖enableSearch，状态变化时触发副作用

  return (
    <div>
      {enableSearch && <input ref={inputRef} />}
      <button onClick={handleClick}>show input</button>
    </div>
  );
}

export default App;

补充说明 #

• React的状态更新会被批量处理，组件不会在调用setState后立刻重新渲染，只有当当前事件循环结束后，才会完成DOM更新。
• useEffect的依赖数组中加入enableSearch，可以确保每当enableSearch变为true时，都会检查输入框是否存在，并执行聚焦操作，这时候输入框已经完成挂载，ref能正确指向真实的DOM元素。

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