React中多Input元素用useRef仅最后一个生效的问题咨询

常见问题根源 #

• 部分Input元素在触发focus时未完成DOM挂载（如条件渲染未满足）
• 连续调用focus()时，浏览器仅保留最后一次操作的焦点状态
• useEffect依赖数组配置不合理，导致逻辑未正确触发

解决办法1：确保DOM更新完成后触发focus #

利用setTimeout让React完成DOM渲染后再执行focus操作，同时检查每个ref的有效性：

useEffect(() => {
  if (buttonClicked) {
    setTimeout(() => {
      [inputRef1, inputRef2, inputRef3, inputRef4, inputRef5].forEach(ref => {
        ref.current?.focus();
      });
    }, 0);
    setButtonClicked(false);
  }
}, [buttonClicked]);

解决办法2：使用requestAnimationFrame优化时机 #

用requestAnimationFrame替代setTimeout，更贴合浏览器的渲染周期，避免DOM未就绪的问题：

useEffect(() => {
  if (buttonClicked) {
    const rafId = requestAnimationFrame(() => {
      [inputRef1, inputRef2, inputRef3, inputRef4, inputRef5].forEach(ref => {
        ref.current?.focus();
      });
    });
    setButtonClicked(false);
    return () => cancelAnimationFrame(rafId);
  }
}, [buttonClicked]);

解决办法3：合并ref引用简化管理 #

不用创建5个独立useRef，改用单个ref存储所有Input元素，更易维护：

const inputRefs = useRef([]);

// 绑定ref的回调函数
const registerInputRef = (el) => {
  if (el && !inputRefs.current.includes(el)) {
    inputRefs.current.push(el);
  }
};

useEffect(() => {
  if (buttonClicked) {
    inputRefs.current.forEach(el => el?.focus());
    setButtonClicked(false);
  }
}, [buttonClicked]);

// 对应Input组件写法
<input ref={registerInputRef} />
<input ref={registerInputRef} />
<input ref={registerInputRef} />
<input ref={registerInputRef} />
<input ref={registerInputRef} />

解决办法4：适配条件渲染场景 #

如果部分Input是条件渲染的，需要确保触发focus时它们已被渲染，可将控制渲染的状态加入useEffect依赖：

// 假设showAllInputs是控制所有Input显示的状态
useEffect(() => {
  if (buttonClicked && showAllInputs) {
    [inputRef1, inputRef2, inputRef3, inputRef4, inputRef5].forEach(ref => ref.current?.focus());
    setButtonClicked(false);
  }
}, [buttonClicked, showAllInputs]);

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