一个人如何将文本从用户界面复制到剪贴板中？

问题描述

嗨，我正在尝试复制以下代码输出的文本。

<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)
  }

我想将输出0.08s复制到剪贴板

屏幕截图如下

解决方法

您可以使用此软件包将文本复制到剪贴板。

npm i copy-to-clipboard --save

您可以创建一个按钮，也可以简单地将文本复制到剪贴板，如功能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
  )
}