无法访问ComponentDidMount上的引用

Question

我尝试使用React v16.3.1加载组件时选择textarea中的所有文本

Following the Refs docs我有一个基本的示例，但 StringBuilder sb = new StringBuilder(); sb.Append(@"<TextBlock xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'> "); sb.Append(@" Hello <Bold>my</Bold> faithful <Underline>computer</Underline>.<Italic>You rock!</Italic>"); sb.Append(@"</TextBlock> "); TextBlock myButton = (TextBlock)XamlReader.Parse(sb.ToString()); t1.Children.Add(myButton); 始终未定义，如果我更改此示例以在按钮上执行相同的代码，则单击它可以正常工作。

最近怎么回事？我曾预料到安装后该组件应该可用吗？

示例代码：

this.textarea

来自package.json：

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>
    );
  }
}

由于

Answer 1

文档说：

  

注意

     

以下示例已更新为使用React.createRef（）API   在React 16.3中介绍。如果您使用的是早期版本   React，我们建议使用回调引用。

如果您使用的是早期版本的React，则需要使用callback refs

＆＃13;

＆＃13;

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'));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用React 16.3

＆＃13;

＆＃13;

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'));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;