Question

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

Answer 1

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

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

复制它

Answer 2

您可以使用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;

Answer 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

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

3 个答案: