Comment implémenter la fonction de copie en réaction

Comment implémenter la fonction de copie dans React : 1. Implémentez la fonction de copie via la bibliothèque "copy-to-clipboard" ; 2. Utilisez la bibliothèque "react-copy-to-clipboard" pour implémenter la fonction de copie ; Via la méthode "navigator.clipboard.writeText" (e)" pour réaliser la copie ; 4. Utilisez la méthode "document.execcommand("copy")" pour réaliser la copie ; 5. Utilisez la bibliothèque "copy-js" pour réaliser la copie fonction.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment implémenter la fonction de copie dans React ?

Copie en un clic dans React - cinq façons

• bibliothèque de copie dans le presse-papiers (recommandée)
• bibliothèque de copie dans le presse-papiers (recommandée)
• navigator.clipboard.writeText(e ) ( recommandé)
• document.execcommand("copy")
• bibliothèque copy-js

copy-to-clipboard

1 Méthode d'installation

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


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

2. to-clipboard

Cette méthode est basée sur la copie dans le presse-papiers. Si vous constatez qu'il existe des restrictions de version avec d'autres packages npm lors de l'installation de la copie dans le presse-papiers, cette méthode peut ne pas fonctionner, mais ce n'est pas impossible pour vous. Je peux l'essayer 1. Installation

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

2. Utilisation - Il y a quelque chose

auquel il faut faire attention
Dans d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127, il ne peut y avoir qu'un seul élément racine. Et je l'ai personnellement essayé. Si dans d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127, un élément racine est enveloppé avec deux nœuds frères tels qu'un div et un bouton, la copie ne prendra pas effet. Je ne sais pas non plus. Si vous savez pourquoi, vous pouvez consulter le code source si vous êtes intéressé.

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

document.execcommand("copy") - est obsolèted2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127中，只能有一个根元素，并且本人亲试，如果在d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127中，一个根元素裹着两个兄弟节点比如div和一个button的话，复制也不会生效，我也不知道为啥，有兴趣的小伙伴可以去看看源码。

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

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

document.execcommand(“copy”)——已被弃用

不过好似有的浏览器还可以使用，具体看文档点我
这个方法我没有使用过，有什么坑我也不清楚。

使用方法

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库

这块我只是找到了这个库，也没有使用过，但是我看源码底层也是使用的document.execcommand("copy")Mais il semble que certains navigateurs peuvent encore l'utiliser, consultez la documentation pour plus de détailsCliquez-moi

Je n'ai jamais utilisé cette méthode et je ne connais pas les pièges.

Comment utiliser

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

bibliothèque copy-js

Je viens de trouver cette bibliothèque et je ne l'ai jamais utilisée, mais je vois que la couche inférieure du code source utilise également document.execcommand ("copy")
1. Installez

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

2. Utilisez

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


 462d3c01430fac045c2ece97525bf109

navigator.clipboard.writeText(e)

Cette méthode présente également des pièges. Le temps de développement est relativement court et. il n'y a pas de détails spécifiques. Étudions la raison

Le paramètre e de cette méthode doit obtenir que la valeur de la zone de texte de saisie soit le nœud copié

Mais cette méthode peut avoir des limitations dans les navigateurs internes de certaines applications. . Dans les navigateurs normaux, il peut être utilisé, mais par exemple, il n'y a pas d'objet presse-papiers dans le navigateur client Feishu. Cela dépend toujours du scénario d'utilisation.

🎜1. Comment utiliser 🎜rrreee🎜Il peut y avoir d'autres méthodes auxquelles je n'ai pas encore pensé🎜🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo React🎜"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!