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(&#39;复制成功&#39;)}<Button onClick={handleClick}>复制</Button>

2. Utilisation - Il y a quelque chose

auquel il faut faire attention
Dans <CopyToClipboard></CopyToClipboard>, il ne peut y avoir qu'un seul élément racine. Et je l'ai personnellement essayé. Si dans <CopyToClipboard></CopyToClipboard>, 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ète<CopyToClipboard></CopyToClipboard>中，只能有一个根元素，并且本人亲试，如果在<CopyToClipboard></CopyToClipboard>中，一个根元素裹着两个兄弟节点比如div和一个button的话，复制也不会生效，我也不知道为啥，有兴趣的小伙伴可以去看看源码。

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”)——已被弃用

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

使用方法

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

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导入<script src="//cdn.rawgit.com/duyetdev/copy.js/master/dist/copy.min.js"></script>

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


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

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!