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

2. Verwendung - Es gibt etwas

, auf das man achten muss

In <CopyToClipboard></CopyToClipboard> kann es nur ein Wurzelelement geben. Und ich habe es persönlich versucht. Wenn in <CopyToClipboard></CopyToClipboard> 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

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

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


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

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!