javascript – 没有setTimeout,无法以编程方式选择ReactJS组件中的HTML textarea？

2019年7月20日 159次阅读

我有一个带有
HTML< textarea>的ReactJS组件.内.

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

我想自动选择< textarea>内容因此用户复制文本会更方便.我试图在React componentDidMount调用中执行此操作.它的工作……有点儿.

尽管我已经知道,组件的安装速度非常慢,以至于即使已经调用componentDidMount,该过程仍在进行中.我这样说的原因是：如果我直接在componentDidMount中调用myTextarea.select(),它会100％失败.但是,如果我在setTimeout(…)调用中放入.select(),以便在尝试选择内容之前等待一点,它会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也执行“after”组件安装,我很难理解两者之间的区别,除了ref将DOM元素作为arg传递之外;在componentDidMount中我必须使用document.getElementById或其他东西.如果有人能描述两者之间更深层次的差异,我将不胜感激.

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

最佳答案 我会猜测发生了什么.

组件是否会再次在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>
    );
  }
});
点赞