React中useRef给条件渲染元素设焦点时ref.current为undefined如何解决

inputRef.current为undefined是两个原因共同导致的：

• React状态更新是异步批处理流程：调用setCommentsToggle后不会立刻完成DOM重渲染，你在同函数内立刻访问inputRef.current时，条件渲染的NewCommentInput组件还没挂载到页面，ref还未完成绑定。
• 若使用MUI的TextField组件，默认ref绑定的是组件外层包装容器，不是内部可聚焦的原生input节点，即使ref拿到值也可能无法正确触发聚焦。

第一步：调整聚焦逻辑的执行时机 #

删除点击事件里同步调用focus的代码，改用useEffect监听展开状态，等DOM渲染完成、ref绑定成功后再执行聚焦：

export default function Post(props) {
  const inputRef = React.useRef();
  const [commentsToggle, setCommentsToggle] = React.useState(false);

  // 展开状态变化、组件挂载完成后自动聚焦
  React.useEffect(() => {
    if (commentsToggle && inputRef.current) {
      inputRef.current.focus();
    }
  }, [commentsToggle]);

  function commentClickHandler() {
    setCommentsToggle((prev) => !prev);
    // 删除此处的inputRef.current.focus()调用
  }

  // 其余返回的JSX逻辑保持原有代码不变
  // ...
}

第二步：修正TextField的ref绑定 #

MUI TextField提供了专门的inputRef属性用于直接绑定内部原生输入框节点，替换原有ref属性即可：

const NewCommentInput = React.forwardRef((props, ref) => {
  // 原有组件内部的commentSubmitHandler、commentState、commentChangeHandler逻辑保留
  return (
    <form className="commentInput" onSubmit={commentSubmitHandler}>
      <TextField
        inputRef={ref} // 替换原ref属性为inputRef
        multiline
        fullWidth
        size="small"
        name="comment"
        placeholder="comment on this post..."
        value={commentState.content}
        onChange={commentChangeHandler}
      />
      <Button variant="outlined" onClick={commentSubmitHandler}>
        Comment
      </Button>
    </form>
  );
});

• useEffect的执行时机是React完成全部DOM更新、页面重渲染结束之后，此时条件渲染的输入框组件已经完成挂载，ref会被正确赋值为对应DOM节点，不会出现undefined的问题。
• MUI组件为了封装样式和交互逻辑，外层会嵌套多层DOM节点，普通ref只能拿到最外层的容器元素，使用官方暴露的inputRef才能直接拿到可聚焦的原生输入框节点，保证focus方法调用生效。

内容的提问来源于stack exchange，提问作者filroy-codes