React条件渲染组件绑定Ref并实现自动聚焦的问题咨询

我明白你遇到的问题了——条件渲染下，输入框只有在showInput变为true时才会挂载，而React的setState是异步操作，你点击按钮后立刻调用focus的时候，输入框还没完成渲染，inputRef.current自然还是null，所以聚焦失效。下面给你几个可行的解决方案：

方案一：利用useEffect监听状态变化触发聚焦 #

这是React官方推荐的处理状态变更后副作用的方式。当showInput从false切换为true时，组件会重新渲染，输入框完成挂载，此时inputRef已经成功绑定到输入框实例，我们可以在useEffect里监听这个状态变化，触发聚焦操作。

修改你的代码如下：

import { Input, InputRef, Button } from 'antd'
import { useRef, useState, useEffect } from 'react'

export default function App() {
  const [showInput, setIsShowInput] = useState(false)
  const inputRef = useRef<InputRef>(null)

  useEffect(() => {
    // 当showInput为true且ref存在时，触发聚焦
    if (showInput && inputRef.current) {
      inputRef.current.focus()
    }
  }, [showInput]) // 仅在showInput变化时执行

  return (
    <div className="App">
      {showInput ? (
        <Input 
          ref={inputRef} 
          onBlur={() => setIsShowInput(false)} 
        />
      ) : (
        <Button onClick={() => setIsShowInput(true)}>Edit me</Button>
      )}
    </div>
  );
}

解释：

• 移除了按钮点击事件里的inputRef.current?.focus()，因为此时状态还没更新，输入框还没渲染
• useEffect的依赖数组只包含showInput，确保只有当状态切换为显示输入框时，才执行聚焦逻辑

方案二：提前渲染输入框（通过样式控制显隐） #

如果你不想依赖useEffect，可以让输入框一开始就存在于DOM中，只是通过CSS隐藏，点击按钮时切换显隐状态。这样inputRef从组件初始化时就绑定了输入框实例，点击按钮后可以直接调用聚焦方法。

代码示例：

import { Input, InputRef, Button } from 'antd'
import { useRef, useState } from 'react'

export default function App() {
  const [showInput, setIsShowInput] = useState(false)
  const inputRef = useRef<InputRef>(null)

  const handleEdit = () => {
    setIsShowInput(true)
    // 此时输入框已经存在于DOM，ref可以直接调用focus
    inputRef.current?.focus()
  }

  return (
    <div className="App">
      <Input 
        ref={inputRef} 
        style={{ display: showInput ? 'block' : 'none' }}
        onBlur={() => setIsShowInput(false)} 
      />
      {!showInput && <Button onClick={handleEdit}>Edit me</Button>}
    </div>
  );
}

说明：

• 输入框始终存在于DOM中，只是通过display样式控制显示/隐藏
• 点击按钮时可以直接调用focus，无需等待组件重新渲染
• 注意：如果页面中有大量这类可编辑单元格，这种方式会增加DOM节点数量，需要根据实际场景权衡性能

备注：内容来源于stack exchange，提问作者DoubleChu