如何自动复制输入框的文本？

Question

我正在使用React，想要当用户点击图标或按钮时将网址复制到剪贴板，但在输入框或文本区域中存在另一个文本...让我解释一下：

我有这段代码（来自stackoverflow上的另一个问题），但我想再进一步。假设出现在文本区域中的代码不是我想要复制到剪贴板的内容，而是包含该代码的网址进行复制。以下是该代码：

class CopyExample extends React.Component {

  constructor(props) {
    super(props);

    this.state = { copySuccess: '' }
  }

  copyToClipboard = (e) => {
    this.textArea.select();
    document.execCommand('copy');
  
    e.target.focus();
    this.setState({ copySuccess: 'Copied!' });
  };

  render() {
    return (
      <div>
        {
         document.queryCommandSupported('copy') &&
          <div>
            <button onClick={this.copyToClipboard}>Copy</button> 
            {this.state.copySuccess && '✓'}
          </div>
        }
        <form>
          <textarea
            ref={(textarea) => this.textArea = textarea}
            value='ABC123CD'
          />
        </form>
      </div>
    );
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我希望的是，不要复制这个代码“ABC123CD”，而是复制一个包含该代码的链接，就像这样：“https://some-url/abc123cd/code”。

- Dfor

Answer 1

您可以在 .select() 之前操作预期值。

this.textArea.value = `https://some-url/${this.textArea.value}/code`;
this.textArea.select();

演示代码沙盒

- hgb123

---

哈哈哈哈哈，你让它看起来如此简单，非常感谢。 - Dfor