復制到剪貼板在 reactjs 中沒有按預期工作

Question

我試圖在 react js 中復制到剪貼板功能。 但我無法做到這一點。 這是我的代碼

import { useEffect, useRef } from "react";

function App() {
  const inputRef = useRef("");
  useEffect(() => {
    inputRef.current.value = window.location;
    inputRef.current.select();
    document.execCommand("copy");
  }, []);
  return (
    <div className="App">
      <input type="text" ref={inputRef} />
    </div>
  );
}

export default App;

代碼沙盒： https://codesandbox.io/s/gallant-tesla-6399m?file=/src/App.js:0-352

文本被選中，但沒有復制。 如何解決這個問題？

Answer 1

我將副本復制到剪貼板以這種方式工作。 問題是 Internet Explorer caniuse不支持它。

import { window } from 'global';

function copy(text) {
   return window.navigator.clipboard.writeText(text);
  }

function CopyToClipboard({copyText}){
   return(
       <div
          onClick={() => {
            copy(copyText);
          }}
           style={{color: 'blue', height: '5px', width: '5px'}}
         />
       )
    }

這是一個可重用的組件，您可以在項目的任何地方使用它。 它的實施方式是

<CopyToClipboard copyText={THE_TEXT_YOU_WANT_HERE} />

Answer 2

我使用 NPM package反應復制到剪貼板

讓事情變得很容易。 在此示例中，當您單擊 Font Awesome 復制圖標時，代碼將被復制到剪貼板並給出 window 警報代碼已被復制。

import { CopyToClipboard } from "react-copy-to-clipboard";
const code = "What to copy";
<CopyToClipboard text={code} onCopy={() => window.alert("Copied to Clipboard")}>
    <i className="fal fa-copy"></i>
</CopyToClipboard>