react复制文本,几行代码搞定

597 阅读1分钟

要实现文本复制,可以使用 Clipboard API 中的 writeText() 方法。这个方法将指定的文本写入剪贴板。

const orderNumRef = useRef<HTMLInputElement>(null);
  const copyHandle = () => {
    navigator.clipboard
      .writeText(orderNumRef?.current.innerText)
      .then(() => message.success('复制成功'));
  };
 <div className={styles.share}>
     <span>
        我的邀请码:<span ref={orderNumRef}>1234567</span>
     </span>
     <img src={copyIcon} alt="" onClick={copyHandle} />
 </div>

navigator.clipboard是最新的api。不支持ie,详细自己看MDN文档 Clipboard.writeText() - Web API 接口参考 | MDN (mozilla.org)

除了使用 Clipboard API 中的 writeText() 方法,还有其他一些方法可以实现文本复制。

其中一种方法是通过创建一个临时的 textarea 元素并将其内容设置为要复制的文本,然后执行 document.execCommand('copy') 命令来实现复制操作。以下是一个示例代码:

function copyToClipboard(text: string) {
    const elem = document.createElement('textarea');
    elem.value = text;
    document.body.appendChild(elem);
    elem.select();
    document.execCommand('copy');
    document.body.removeChild(elem);
    message.success('文本已成功复制到剪贴板')
  }