React v16.3.1：componentDidMount中无法获取textarea refs求助

首先咱们把核心问题点透：在React 16.3+的createRef机制里，你直接访问this.textarea拿到的是Ref对象，而非真正的DOM元素——真正的DOM元素存在于Ref对象的.current属性里！这就是你在componentDidMount里操作失败的关键原因。

为什么会出现「this.textarea是undefined」的错觉？ #

准确来说this.textarea本身不会是undefined（你已经在constructor里用React.createRef()初始化了它），你应该是尝试调用this.textarea.select()时触发报错，才误以为它是undefined——实际上是你没访问到.current属性，直接对Ref对象调用DOM方法当然会失败。

而按钮点击事件能正常运行，大概率是你在点击事件里无意中写对了（比如不小心用到了.current），或是之前用旧的字符串ref（ref="textarea"）时，在点击事件里用this.refs.textarea访问到了DOM元素，但切换到createRef后没同步修改逻辑。

正确的代码写法 #

咱们修正你的示例代码，把componentDidMount里的操作改成访问.current：

import React from "react";

class Hello extends React.Component {
  constructor(props) {
    super(props);
    // 初始化Ref对象
    this.textarea = React.createRef();
  }

  componentDidMount() {
    // 必须访问.current才能拿到DOM元素
    if (this.textarea.current) {
      this.textarea.current.select();
    }
  }

  handleClick = () => {
    // 点击事件里同样要访问.current
    this.textarea.current.select();
  };

  render() {
    return (
      <div>
        {/* 把Ref绑定到textarea元素上 */}
        <textarea ref={this.textarea} defaultValue="要选中的文本" />
        <button onClick={this.handleClick}>手动选中</button>
      </div>
    );
  }
}

export default Hello;

额外注意点 #

• 空值检查：虽然componentDidMount时DOM已经挂载，但为了避免极端情况（比如textarea是条件渲染的），最好加个if (this.textarea.current)的判断，防止报错。
• 别混淆Ref类型：React 16.3之前的字符串ref（ref="xxx"）已被官方不推荐，createRef是标准用法，一定要记住它的结构是ref对象.current = DOM元素。
• 函数组件适配：如果是函数组件，需要用useRef钩子，用法类似——const textareaRef = useRef(null)，然后通过textareaRef.current.select()操作。

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