React组件调用toggleInputCardName无法为Input设置焦点的问题

为什么IsInputCardName状态看似同时为true和false #

React的状态更新是异步批量执行的。当你在toggleInputCardName里调用setIsInputCardName(true)后，当前函数作用域内的IsInputCardName并不会立刻更新，仍然保持旧值false——这就是控制台打印NO inputRef.current null false的原因。而页面渲染是基于更新后的状态，所以会显示null inputRef true，本质是同一状态更新过程中，不同时机的状态快照，并非状态同时存在两个值。

如何在toggleInputCardName中为Input设置焦点 #

因为状态更新后，Input组件需要时间完成渲染，直接在toggleInputCardName里调用inputRef.current?.focus()会因为DOM还未生成而无效。正确的做法是通过useEffect监听IsInputCardName的变化，当状态变为true时再执行焦点设置：

useEffect(() => {
  if (IsInputCardName && inputRef.current) {
    inputRef.current.focus();
  }
}, [IsInputCardName]);

同时要确保inputRef正确绑定到Input元素上：

{IsInputCardName && (
  <div>
    {`${inputRef.current} inputRef ${IsInputCardName}`}
    <input ref={inputRef} />
  </div>
)}

这样当状态切换为true、Input渲染完成后，useEffect会自动触发并为Input设置焦点。

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