HTML text area inside ReactJS component cannot be programmatically selected without setTimeout?

Question

I have a ReactJS component with HTML <textarea>inside.

<textarea>has an attribute valuepre-populated (see below ... I am creating a link for user to copy).

I want to automatically select content <textarea>, so it will be more convenient for the user to copy the text. I am trying to do this in a React call componentDidMount. It works ... sort of.

As far as I can tell, the component is mounted so slowly that the process still continues, even when it is componentDidMountalready called. The reason I say this is: if I call myTextarea.select()directly within componentDidMount, it does not execute 100% of the time. However, if I put .select()in a call setTimeout(...), so it waits for a bit before trying to select content, it works for 100% of the time.

Edit / notice: after I joked a bit, I found some feelings indicating that using setTimeout(...)for this purpose is bad practice, so now I want to avoid using it even more.

What can I lose, and is there a better way to do this?

Here is what I have.

This version does not work.

var GenerateLinkUi = React.createClass({
  componentDidMount: function() {
    document.getElementById('cyoag-generated-link-textarea').select();
  },
  render: function () {
    return (
      <div id='cyoag-generate-link-ui'>
        <textarea readOnly id='cyoag-generated-link-textarea' value={config.hostDomain + 'link?id=' + this.props.nodeUid} />
      </div>
    );
  }
});

This version succeeds.

var GenerateLinkUi = React.createClass({
  componentDidMount: function() {
    setTimeout(function(){
      document.getElementById('cyoag-generated-link-textarea').select();
    }, 500);
  },
  render: function () {
    return (
      <div id='cyoag-generate-link-ui'>
        <textarea readOnly id='cyoag-generated-link-textarea' value={config.hostDomain + 'link?id=' + this.props.nodeUid} />
      </div>
    );
  }
});

: . , . ref , componentDidMount "" , , , ref DOM arg; componentDidMount document.getElementById - . , - .

, .

Answer 1

, .

componentDidMount? , textarea select(), DOM, .

setTimeout, , componentDidMount. , , select().

refs .

var GenerateLinkUi = React.createClass({
  componentDidMount: function() {
    this.textArea.select();
  },
  setTextArea: function(ref) {
    this.textArea = ref;
  }
  render: function () {
    return (
      <div id='cyoag-generate-link-ui'>
        <textarea ref={this.setTextArea} readOnly id='cyoag-generated-link-textarea' value={config.hostDomain + 'link?id=' + this.props.nodeUid} />
      </div>
    );
  }
});

Answer 2

refs callback.

React , . ref , , .

, componentDidMount.

---

Refs

ReactClass.