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('复制成功')}0ac49d3b14c40e8d204137d7fbf76f9d复制a1cb88e6789f399807801ea3799938af

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. d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127

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

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

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

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);
  })

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导入adf581fd640ebe59dee87c508e6d19bb2cacc6d41bbb37262a98f745aa00fbf0

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('复制失败，请稍后再试'));
    },
  );};


 462d3c01430fac045c2ece97525bf109

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!