react 怎么实现拷贝功能

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


//cdn引入
<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>

import copy from 'copy-to-clipboard';const handleClick = ()=>{
	copy('复制的内容');
	message.success('复制成功')}<Button onClick={handleClick}>复制</Button>

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

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

 <CopyToClipboard text={'复制的内容'}
   onCopy={(_, result) => {
     if (result) {
       message.success('复制成功');
     } else {
       message.error('复制失败，请稍后再试');
     }
   }}
 >
   <Button
     type='primary'
     icon={<CopyOutlined />}
   />
 </CopyToClipboard>

<button id="btn"  style="margin-top: 40px;">一键复制</button>const 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);
  })

// npm包下载npm install copy-js --save// CDN导入<script src="//cdn.rawgit.com/duyetdev/copy.js/master/dist/copy.min.js"></script>

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

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


 <Search
   bordered={false}
   value={window.location.href}
   enterButton={intl.t('复制链接')}
   size='middle'
   onSearch={copyLink}
 />