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

时间:2019-06-21 13:09:44

标签: css reactjs

我想使用react js创建复制到剪贴板的内容,但我设计为 包含“复制”字词的文本框,当我单击此复制字词时,它更改为要复制 并且文本框值将被复制

3 个答案:

答案 0 :(得分:0)

对于React中的剪贴板交互,我使用clipboard-polyfil。很好,因为它提供了可以在所有浏览器上使用的polyfill,而某些内置函数则无法使用,例如document.execCommand("copy")navigator.clipboard.write()

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

复制它

答案 1 :(得分:0)

您可以使用refdocument.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 :(得分:0)

我个人使用的是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