반응에서 복사 기능을 구현하는 방법

반응에서 복사 기능을 구현하는 방법: 1. "클립보드에 복사" 라이브러리를 통해 복사 기능을 구현합니다. 2. "반응-클립보드에 복사" 라이브러리를 사용하여 복사 기능을 구현합니다. "navigator.clipboard.writeText" (e)" 메소드를 통해 복사를 구현합니다. 4. "document.execcommand("copy")" 메소드를 사용하여 복사를 구현합니다. 5. "copy-js" 라이브러리를 사용하여 복사를 구현합니다. 기능.

이 튜토리얼의 운영 환경: Windows 10 시스템, React 버전 18.0.0, Dell G3 컴퓨터.

React에서 복사 기능을 어떻게 구현하나요?

React에서 원클릭 복사 - 5가지 방법

• copy-to-clipboard 라이브러리(권장)
• react-copy-to-clipboard 라이브러리(권장)
• navigator.clipboard.writeText(e ) ( 권장)
• document.execcommand("복사")
• copy-js 라이브러리

copy-to-clipboard

1. 설치 방법

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


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

2.react-copy- to-clipboard

이 방법은 copy-to-clipboard를 기반으로 합니다. copy-to-clipboard를 설치할 때 다른 npm 패키지에 버전 제한이 있는 경우 이 방법이 작동하지 않을 수 있지만 불가능하지는 않습니다. 1. 설치

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

2. 사용법 - 주의할 점

이 있습니다
. d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127에는 루트 요소가 하나만 있을 수 있습니다. 그리고 개인적으로 시도해 보았습니다. d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127에서 루트 요소가 div 및 버튼과 같은 두 개의 형제 노드로 래핑되면 복사가 적용되지 않습니다. 이유를 알고 있다면 관심이 있으면 소스 코드를 확인해 보세요.

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

document.execcommand("copy") - 더 이상 사용되지 않습니다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")그러나 일부 브라우저에서는 여전히 사용할 수 있는 것 같습니다. 자세한 내용은 설명서를 참조하세요.클릭하세요

저는 이 방법을 사용해본 적이 없고 어떤 함정이 있는지 모르겠습니다.

사용방법

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

copy-js 라이브러리

이 라이브러리를 발견하고 한번도 사용해본 적이 없는데, 소스코드 맨 아래 레이어에서도 를 사용하고 있는 것을 보니 document.execcommand("복사")
1.

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

를 설치합니다. 2.

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)

를 사용합니다. 이 방법에도 개발 시간이 비교적 짧고 함정이 있습니다. 자세한 이유는 연구해 보겠습니다

이 방법의 매개 변수 e는 입력 텍스트 상자의 값을 복사된 노드로 가져오는 것입니다

그러나 이 방법은 일부 응용 프로그램의 내장 브라우저에서 제한이 있을 수 있습니다. 일반 브라우저에서는 사용할 수 있지만, 예를 들어 Feishu 클라이언트 브라우저에는 클립보드 개체가 없습니다. 여전히 사용 시나리오에 따라 다릅니다.

🎜1. 사용 방법 🎜rrreee🎜아직 생각하지 못한 다른 방법이 있을 수도 있습니다🎜🎜🎜추천 학습: "🎜react 비디오 튜토리얼🎜"🎜

위 내용은 반응에서 복사 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!