How to implement copy function in react

## The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

#How to implement the copy function in react?

One-click copying in React - five methods

copy-to-clipboard library (recommended)
• react-copy-to-clipboard library (recommended)
• navigator.clipboard.writeText(e) (recommended)
• document.execcommand("copy")
• copy- js library

copy-to-clipboard

1. Installation method

// npm安装---这种方式可能会对babel的版本有限制 npm i --save copy-to-clipboard //cdn引入 

2. Usage method

import copy from 'copy-to-clipboard';const handleClick = ()=>{ copy('复制的内容'); message.success('复制成功')}0ac49d3b14c40e8d204137d7fbf76f9d复制a1cb88e6789f399807801ea3799938af

react-copy-to-clipboard

This method is based on copy-to-clipboard. If you find that there are version restrictions with other npm packages when installing copy-to-clipboard If so, then this probably won't work, but it's not impossible to try

1. Installation

npm i --save react-copy-to-clipboard

2. Usage - there is a place

to pay attention to, ind2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127, there can only be one root element, and I tried it myself, if ind2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127, a root element is wrapped If there are two sibling nodes such as a div and a button, the copy will not take effect. I don't know why. Interested friends can check out the source code.

import { CopyToClipboard } from 'react-copy-to-clipboard'; 43bbcd4e844b20bc078f8c9897b39d8a { if (result) { message.success('复制成功'); } else { message.error('复制失败，请稍后再试'); } }} > a8a83f830be7ccf2b2ad5e838aba8303} /> 54eaac8efc3be0e4829f8d3d1d1d0127

document.execcommand("copy")——has been deprecated

But it seems that some browsers can still use it, see the document

for details II have never used this method, and I don’t know what the pitfalls are.

How to use

42b48c43c2d811927b81b54d0c1f3424一键复制65281c5ac262bf6d81768915a4a77ac0const btn = document.querySelector('#btn'); btn.addEventListener('click', () => { const textarea= document.createElement('textarea'); textarea.setAttribute('readonly', 'readonly'); textarea.value = 'xxxxx'; document.body.appendChild(textarea); textarea.select(); if (document.execCommand('copy')) { document.execCommand('copy'); alert('复制成功'); } document.body.removeChild(textarea); })

copy-js library

I just found this library and have never used it, but I looked at the bottom of the source code Also used

document.execcommand("copy")1. Install

// npm包下载npm install copy-js --save// CDN导入adf581fd640ebe59dee87c508e6d19bb2cacc6d41bbb37262a98f745aa00fbf0

2. Use

import copy from 'copy-to-clipboard';copy('hello world', function(err) { if (err) console.log('Some thing went wrong!'); console.log('Copied!');});

navigator.clipboard. writeText(e)

This method also has pitfalls. The development time is relatively short, and there is no specific study of the reasons.

The parameter e of this method needs to get the value of the input text box and copy it. Node

However, this method may have limitations in the in-end browser of some applications. It can be used in normal browsers, but for example, it is now available in the Feishu end-end browser. There is no clipboard object. It still depends on the usage scenario.

1. How to use

const { Search } = Input;const copyLink = (e: any) => { navigator.clipboard.writeText(e).then( () => { message.success(intl.t('复制成功')); console.log(e); }, () => { message.error(intl.t('复制失败，请稍后再试')); }, );}; 462d3c01430fac045c2ece97525bf109

There may be other methods that I haven’t thought of yet