如何在反應中將文本從 UI 復制到剪貼板？

Question

您好我正在嘗試復制從以下代碼輸出的文本。

<Text style={{color: 'white', textAlign: 'center'}}>
        {rideDuration != '' ? rideDuration + 's' : null}
      </Text>

setAmountDuration 定義如下。

  const calculateAmountDuration = async () => {
    const duration = ride.stop.- ride.start
    let durationSec = duration/1000;
    setrideDuration(durationSec)
  }

我想將 output 0.08s 復制到剪貼板

截圖如下

Answer 1

您可以使用此 package 將文本復制到剪貼板。

npm i copy-to-clipboard --save

您可以創建一個按鈕或簡單地將文本復制到剪貼板，如 function calculateAmountDuration()中所示

 import copy from 'copy-to-clipboard'; function Exmaple { let [rideDuration, setrideDuration] = useState(''); const calculateAmountDuration = async () => { const duration = ride.stop.- ride.start let durationSec = duration/1000; setrideDuration(durationSec); // Copy to Clipboard the moment // the ride duration ios calculated. copy(durationSec.toString()); } // You can also have a button which copies to clipboard const handleCopyToClipboard = (event) => { event.preventDefault(); copy(durationSec.toString()); } return ( <Text style={{color: 'white', textAlign: 'center'}}> {rideDuration?= '': rideDuration + 's' : null} </Text> <button onClick={handleCopyToClipboard}>Copy!</button ) }