So implementieren Sie die Kopierfunktion in React

So implementieren Sie die Kopierfunktion in React: 1. Implementieren Sie die Kopierfunktion über die Bibliothek „Copy-to-Clipboard“. 2. Verwenden Sie die Bibliothek „React-Copy-to-Clipboard“, um die Kopierfunktion zu implementieren. Durch die Methode „navigator.clipboard.writeText“ (e)“ zum Kopieren; 4. Verwenden Sie die Methode „document.execcommand(“copy“)“, um das Kopieren zu realisieren; 5. Verwenden Sie die Bibliothek „copy-js“, um das Kopieren zu realisieren Funktion.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie implementiert man die Kopierfunktion in React?

Kopieren mit einem Klick in React – fünf Möglichkeiten

• Bibliothek zum Kopieren in die Zwischenablage (empfohlen)
• Bibliothek zum Kopieren in die Zwischenablage (empfohlen)
• navigator.clipboard.writeText(e ) ( empfohlen)
• document.execcommand("copy")
• copy-js-Bibliothek

copy-to-clipboard

1. Installationsmethode

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


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

react- copy- In die Zwischenablage kopierenDiese Methode basiert auf „In die Zwischenablage kopieren“ Wenn Sie bei der Installation von „In die Zwischenablage kopieren“ Versionseinschränkungen feststellen, funktioniert diese Methode möglicherweise nicht, ist aber nicht unmöglich kann es ausprobieren

1. Installation

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

2. Verwendung - Es gibt etwas , auf das man achten muss

In d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127 kann es nur ein Wurzelelement geben. Und ich habe es persönlich versucht. Wenn in d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127 ein Stammelement mit zwei Geschwisterknoten wie einem Div und einer Schaltfläche umschlossen ist, wird die Kopie nicht wirksam Ich weiß es auch nicht. Wenn Sie wissen, warum, können Sie sich bei Interesse den Quellcode ansehen.

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

d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127中，只能有一个根元素，并且本人亲试，如果在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")document.execcommand("copy") - ist veraltet

Aber es scheint, dass einige Browser es immer noch verwenden können, Einzelheiten finden Sie in der DokumentationKlicken Sie auf mich

Ich habe diese Methode noch nie verwendet und weiß nicht, wo die Fallstricke liegen.

So verwenden Sie

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

copy-js-Bibliothek

Ich habe diese Bibliothek gerade erst gefunden und noch nie verwendet, aber ich sehe, dass die unterste Ebene des Quellcodes auch verwendet document.execcommand ("kopieren")

1. Installieren Sie

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)

Diese Methode hat auch Fallstricke. Die Entwicklungszeit ist relativ kurz und Es gibt keine spezifischen Details. Lassen Sie uns den Grund untersuchen. Der Parameter e dieser Methode muss den Wert des Eingabetextfelds abrufen, um der kopierte Knoten zu sein. Diese Methode kann jedoch in einigen Anwendungen Einschränkungen in den Endbrowsern haben . In normalen Browsern ist es möglich, es gibt jedoch beispielsweise kein Zwischenablageobjekt im Feishu-Client-Browser. Es kommt immer noch auf das Nutzungsszenario an.

1. So verwenden Sie

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


 462d3c01430fac045c2ece97525bf109

Es gibt möglicherweise noch andere Methoden, an die ich noch nicht gedacht habe

🎜🎜Empfohlenes Lernen: „🎜Video-Tutorial reagieren🎜“🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kopierfunktion in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!