javascript - 如果没有 setTimeout，无法以编程方式选择 ReactJS 组件内的 HTML 文本区域？

Question

我有一个带有 HTML 的 ReactJS 组件 <textarea>里面。

<textarea>有 value预先填充的属性(见下文......我正在生成一个链接供用户复制)。

我想自动选择 <textarea>内容，这样用户复制文本会更方便。我正在尝试在 React 中执行此操作 componentDidMount称呼。它有效……有点。

据我所知，组件安装速度非常慢，即使 componentDidMount 时，该过程仍在进行中已经被调用。我这样说的原因是:如果我调用myTextarea.select()直接在 componentDidMount 内，它失败 100% 的时间。但是，如果我把 .select()在setTimeout(...)调用以便它在尝试选择内容之前稍等片刻，它 100% 的时间都有效。

编辑/注意:在仔细研究之后，我发现一些观点表明使用 setTimeout(...)为此目的是不好的做法，所以现在我更加渴望避免使用它。

我可能遗漏了什么，是否有更好的方法来实现这一点？

这是我的。

此版本失败。

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

此版本成功。

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 之外，我很难理解两者之间的区别。作为 arg 传递一个 DOM 元素；在 componentDidMount 中我必须使用 document.getElementById或者其他的东西。如果有人能描述两者之间更深层次的差异，我将不胜感激。

与此同时，我已经找到了解决此问题的其他方法，但我仍然渴望了解有关该主题的更多信息。

Answer 1

我会猜测发生了什么。

组件是否在 componentDidMount 之后再次渲染？我想它会再次呈现 textarea 并覆盖 select() 因为你是在实际的 DOM 而不是虚拟的上完成的。

它在使用 setTimeout 时有效，因为您在 componentDidMount 之后发生的所有渲染之后执行此操作。我想如果您再次更新 Prop ，它会再次覆盖 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>
    );
  }
});