React에서 클립 보드에 복사

document.execCommand ( 'copy')

이것은 모든 최신 브라우저 에서 작동하는 안전 장치 옵션이며 document.execCommand('copy')문서 개체 모델의 방법입니다.

가장 일반적인 옵션입니다. DOM (문서 객체 모델) 시대 이후.

inputRefusing 의 값을 선택하는 데 필요한 변수를 전달하지 않기 때문에 작업하기가 까다로울 수 있습니다 inputRef.current.select.

당신이 할 수있는 명시적인 변수 할당은 없습니다 console.log.

console.log(document.execCommand('copy'))복사 기능이 작동하면 true를 인쇄 하지만 .

DOM에서 텍스트를 읽어 클립 보드에 복사합니다.

react를 사용하는 경우 입력 요소를 사용해야합니다. 그렇지 않으면 select is non a function.

따라서 재사용 가능한 구성 요소를 사용하는 경우 input요소 의 속성을 상속하지 못할 수 있습니다 . select입력 요소에 바인딩 된 함수입니다.

Navigator.Clipboard API

최신 브라우저를 다루는 경우 비동기 Navigator.Clipboard api는 우아한 옵션입니다.

복사 명령에 대해 훨씬 더 많은 제어와 가시성을 갖게됩니다. 그리고 비동기 함수에 변수를 전달할 수 있습니다.

즉, 복사 할 요소의 유형에 대해 걱정할 필요가 없습니다. 값을 추출 할 수있는 한 클립 보드에 복사 할 수 있습니다.

예를 들어 이미지를 클립 보드에 복사하는 것이 더 간단 해집니다.

오류 상태,로드 상태 및 텍스트가 클립 보드에 복사되었다는 유효한 확인을 원하는 경우 이것이 귀하의 기능입니다.

지원되지 않는 유일한 브라우저는 Safari 13데스크톱 용이며 iOS 앱이 지원됩니다.

이를 염두에두고 Navigator.Clipboardapi가 존재하는지, 사용하는지 확인하는 polyfill을 작성할 수 있습니다 .

그렇지 않으면 document.execCommand('copy')명령으로 돌아갑니다 .

아래 CodePen에서 이에 대한 예제를 볼 수 있습니다.

도서관

이 작업에 라이브러리를 사용할 필요는 없지만 시간이 많이 걸리는 경우 온라인에서 가장 권장되는 옵션입니다.
https://www.npmjs.com/package/react-copy-to-clipboard
https://www.npmjs.com/package/react-clipboard.js

자원

https://caniuse.com/#search=Clipboard

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

Suggested posts

서버 측 렌더링과 클라이언트 측 렌더링

서버 측 렌더링과 클라이언트 측 렌더링

당신은 몇 살입니까? 인터넷이 정적이고 비 동적이며 부실했던 때를 기억한다면 대답은 좋은 지표가 될 것입니다. 제가 90 년대에 어렸을 때 인터넷은 정보와 많은 상호 작용을 허용하는 대신 정보를 보여줄 수있었습니다.

JavaScript 테스트의 기초

JavaScript 테스트의 기초

"잠깐만 요, JavaScript 테스팅에 대한 또 다른 기사"라고 생각할 수 있습니다. 예, JavaScript 테스트의 기본 사항에 대해 더 많이 이야기하고 싶은 이유는이 주제에 대한 많은 기사가 JavaScript 테스트를 작성하기위한 코드 스 니펫과 도구를 보여줌으로써 매우 유사한 방식으로 작성 되었기 때문입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.