无法访问 ComponentDidMount 上的引用

IT技术 javascript reactjs
2021-05-02 17:16:07

当组件使用 React v16.3.1 加载时，我试图选择文本区域中的所有文本

按照 Refs 文档，我有一个基本示例，但this.textarea始终未定义，如果我更改此示例以在按钮上执行相同的代码，则单击它可以正常工作。

发生什么了？我原以为安装后组件应该可用？

示例代码：

import React from "react";

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.textarea = React.createRef();
  }

  componentDidMount = () => {
    this.textarea.current.select();
  };

  render() {
    return (
      <div>
        <textarea
          className="form-control"
          defaultValue="the quick brown fox."
          ref={this.textarea}
        />
      </div>
    );
  }
}

来自 package.json：

"react": "^16.3.1",
"react-dom": "^16.3.1",

谢谢

1个回答

文档说：

笔记

下面的示例已更新为使用 React 16.3 中引入的 React.createRef() API。如果您使用的是较早版本的 React，我们建议您改用回调引用。

如果您使用的是较早版本的 React，则需要使用回调引用

class App extends React.Component {
  constructor(props) {
    super(props);
    this.textarea = null;

    this.setTextareaRef = element => {
      this.textarea = element;
    };
  }

  componentDidMount = () => {
    if (this.textarea) this.textarea.select();
  };

  render() {
    return (
      <div>
        <textarea
          className="form-control"
          defaultValue="the quick brown fox."
          ref={this.setTextareaRef}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

使用 React 16.3

class App extends React.Component {
  constructor(props) {
    super(props);
    this.textarea = React.createRef();
  }

  componentDidMount = () => {
    this.textarea.current.select();
  };

  render() {
    return (
      <div>
        <textarea
          className="form-control"
          defaultValue="the quick brown fox."
          ref={this.textarea}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

其它你可能感兴趣的问题
上一篇迭代 FileList、React、Typescript 下一篇在 React 中解构 props 的不同方式