無法訪問ComponentDidMount上的引用

Question

我正在嘗試使用React v16.3.1加載組件時選擇textarea中的所有文本

在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",

謝謝

Answer 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>