在reactJS中，如何将文本复制到剪贴板？

Question

我使用的是ReactJS，当用户点击链接时，我想将一些文本复制到剪贴板。

我使用的是Chrome 52，不需要支持任何其他浏览器。

我不明白为什么这段代码不会导致数据被复制到剪贴板。（代码片段的来源来自Reddit帖子）。

我做错了吗？有人能建议有没有一种“正确”的方法来使用reactjs实现复制到剪贴板？

copyToClipboard = (text) => {
  console.log('text', text)
  var textField = document.createElement('textarea')
  textField.innerText = text
  document.body.appendChild(textField)
  textField.select()
  document.execCommand('copy')
  textField.remove()
}

Answer 1

您可以在不需要外部库的情况下完成此操作，例如：在一个按钮内

<button 
  onClick={() =>  navigator.clipboard.writeText('Copy this text to clipboard')}
>
  Copy
</button>

对于internet explorer 11和更早版本的浏览器，您可能需要稍微更改代码，例如：

<button 
  onClick={() =>  window.clipboardData.setData("Text", 'Copy this text to clipboard')}>
 Copy
</button>

希望这有帮助。

Answer 2

我个人不认为有必要为此建立图书馆。看着http://caniuse.com/#feat=clipboard它现在得到了相当广泛的支持，但是你仍然可以做一些事情，比如检查当前客户端中是否存在该功能，如果不存在，只需隐藏“复制”按钮。

import React from 'react';

class CopyExample extends React.Component {

  constructor(props) {
    super(props);

    this.state = { copySuccess: '' }
  }

  copyToClipboard = (e) => {
    this.textArea.select();
    document.execCommand('copy');
    // This is just personal preference.
    // I prefer to not show the whole text area selected.
    e.target.focus();
    this.setState({ copySuccess: 'Copied!' });
  };

  render() {
    return (
      <div>
        {
         /* Logical shortcut for only displaying the 
            button if the copy command exists */
         document.queryCommandSupported('copy') &&
          <div>
            <button onClick={this.copyToClipboard}>Copy</button> 
            {this.state.copySuccess}
          </div>
        }
        <form>
          <textarea
            ref={(textarea) => this.textArea = textarea}
            value='Some text to copy'
          />
        </form>
      </div>
    );
  }

}
    
export default CopyExample;

更新：使用React 16.7.0-alpha中的React钩子重写。0

import React, { useRef, useState } from 'react';

export default function CopyExample() {

  const [copySuccess, setCopySuccess] = useState('');
  const textAreaRef = useRef(null);

  function copyToClipboard(e) {
    textAreaRef.current.select();
    document.execCommand('copy');
    // This is just personal preference.
    // I prefer to not show the whole text area selected.
    e.target.focus();
    setCopySuccess('Copied!');
  };

  return (
    <div>
      {
       /* Logical shortcut for only displaying the 
          button if the copy command exists */
       document.queryCommandSupported('copy') &&
        <div>
          <button onClick={copyToClipboard}>Copy</button> 
          {copySuccess}
        </div>
      }
      <form>
        <textarea
          ref={textAreaRef}
          value='Some text to copy'
        />
      </form>
    </div>
  );
}

Answer 3

如果想通过编程将数据写入剪贴板，可以在按钮上使用这个简单的内联onClick函数。

onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}