Bagaimana untuk melaksanakan fungsi salin dalam bertindak balas

Cara melaksanakan fungsi salin dalam react: 1. Laksanakan fungsi salin melalui perpustakaan "copy-to-clipboard" 2. Gunakan perpustakaan "react-copy-to-clipboard" untuk melaksanakan salinan fungsi; 3. Melalui kaedah "navigator" .clipboard.writeText(e)" untuk merealisasikan penyalinan; 4. Untuk merealisasikan penyalinan melalui kaedah "document.execcommand("copy")"; 5. Untuk merealisasikan fungsi salinan melalui "copy- js" perpustakaan.

Persekitaran pengendalian tutorial ini: sistem Windows10, react18 Versi .0.0, komputer Dell G3.

Bagaimana untuk melaksanakan fungsi salin dalam bertindak balas?

Salinan satu klik dalam React - lima cara

• pustaka salin ke papan keratan (disyorkan)
• bertindak balas- perpustakaan copy-to-clipboard (disyorkan)
• navigator.clipboard.writeText(e) (disyorkan)
• document.execcommand(“copy”)
• copy- js library

salinan ke papan keratan

1 Kaedah pemasangan

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


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

2 🎜>

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

react-copy-to-clipboard

Kaedah ini berdasarkan copy-to-clipboard Jika semasa memasang copy-to-clipboard, didapati ia berbeza daripada yang lain bahagian npm Jika pakej mempunyai sekatan versi, maka ini mungkin tidak akan berfungsi, tetapi tidak mustahil untuk mencuba 1. Pemasangan

2. Penggunaan - ada sesuatu

untuk perhatikan

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

, dalam

, hanya boleh ada satu elemen akar, dan saya sendiri mencubanya Jika dalam , elemen akar dibalut dengan dua nod adik-beradik seperti div dan butang, iaitu. salinan tidak akan berkesan. Saya tidak tahu mengapa, tetapi rakan-rakan yang berminat boleh menyemak kod sumber. <CopyToClipboard></CopyToClipboard><CopyToClipboard></CopyToClipboard>

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

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

document.execcommand("copy") - telah ditamatkan

Walau bagaimanapun, nampaknya sesetengah penyemak imbas masih boleh menggunakannya, lihat dokumentasi untuk butiran Klik saya

Saya tidak pernah menggunakan kaedah ini, dan saya tidak tahu apakah perangkapnya. Cara menggunakan

<button id="btn"  style="margin-top: 40px;">一键复制</button>const btn = document.querySelector(&#39;#btn&#39;);
  btn.addEventListener(&#39;click&#39;, () => {
      const textarea= document.createElement(&#39;textarea&#39;);
      textarea.setAttribute(&#39;readonly&#39;, &#39;readonly&#39;);
      textarea.value = &#39;xxxxx&#39;;
      document.body.appendChild(textarea);
      textarea.select();
      if (document.execCommand(&#39;copy&#39;)) {
          document.execCommand(&#39;copy&#39;);
          alert(&#39;复制成功&#39;);
      }
      document.body.removeChild(textarea);
  })

pustaka copy-js

Saya baru jumpa perpustakaan ini dan tidak pernah menggunakannya, tetapi saya nampak Bahagian bawah lapisan kod sumber juga digunakan

1. Pasang

document.execcommand("copy")
2. Gunakan

// 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!');});

navigator.clipboard.writeText(e )

Kaedah ini juga mempunyai masalah Masa pembangunan agak singkat, dan tiada kajian khusus tentang sebabnya Parameter e kaedah ini adalah untuk mendapatkan nilai kotak teks input untuk disalin. nod

Walau bagaimanapun, kaedah ini mungkin mempunyai had dalam penyemak imbas dalam sesetengah aplikasi Ia boleh digunakan dalam penyemak imbas biasa, tetapi sebagai contoh, tiada objek papan keratan dalam hujung Feishu. pelayar tamat. Ia masih bergantung pada senario penggunaan.

1. Cara menggunakan

Mungkin ada kaedah lain yang belum difikirkan

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(&#39;复制链接&#39;)}
   size=&#39;middle&#39;
   onSearch={copyLink}
 />

Pembelajaran yang disyorkan: "

react Tutorial video

》

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi salin dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!