我想使用 react js 创建到剪贴板的副本答案

【问题标题】：i want to create a copy to clipboard using react js我想使用 react js 创建到剪贴板的副本
【发布时间】：2019-11-04 08:18:32
【问题描述】：

我想使用 React js 创建副本到剪贴板，但我的设计喜欢包含“复制”字的文本框，当我单击此复制字时，它更改为被复制并且文本框的值将被复制

【问题讨论】：

标签： css reactjs

【解决方案1】：

您可以使用ref、document.execCommand('copy') 来做到这一点。

import React from 'react';

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='Some text to copy'
          />
        </form>
      </div>
    );
  }

}

export default CopyExample;

【讨论】：

【解决方案2】：

对于 React 中的剪贴板交互，我使用 clipboard-polyfil。这很好，因为它提供了适用于所有浏览器的 polyfill，而某些原生剪贴板功能不具备这些功能，例如 document.execCommand("copy") 和 navigator.clipboard.write()。

将此包与 react 一起使用的最简单方法是制作一个自定义组件，将要复制的字符串作为 prop 传入，然后使用 clipboard.writeText(this.props.stringValue); 复制它

【讨论】：

【解决方案3】：

就我个人而言，我使用的是react-copy-to-clipboard

1- 使用 npm 安装它：

npm install --save react react-copy-to-clipboard

2- 将其导入您的文件：

import {CopyToClipboard} from 'react-copy-to-clipboard';

3- 现在您可以使用 <CopyToClipboard> 组件包装您的组件

它还提供onCopy可选的回调函数。

资源：CopyToClipboard repo on github

【讨论】：