当前位置：首页 > React

react如何实现点击复制链接地址

2026-01-26 06:14:31React

使用 `document.execCommand` 方法（兼容旧浏览器）

通过 document.execCommand('copy') 实现复制功能，需动态创建 textarea 元素并选中文本。
在 React 中，可通过 useRef 获取 DOM 元素，绑定点击事件触发复制逻辑：

react如何实现点击复制链接地址

import React, { useRef } from 'react';

function CopyLinkButton() {
  const textAreaRef = useRef(null);

  const copyToClipboard = () => {
    textAreaRef.current.select();
    document.execCommand('copy');
  };

  return (
    <div>
      <input 
        ref={textAreaRef} 
        value="https://example.com" 
        readOnly 
        style={{ position: 'absolute', left: '-9999px' }}
      />
      <button onClick={copyToClipboard}>复制链接</button>
    </div>
  );
}

使用 Clipboard API（现代浏览器推荐）

通过 navigator.clipboard.writeText() 实现复制，更简洁且支持 Promise。需注意浏览器兼容性：

react如何实现点击复制链接地址

function CopyLinkButton() {
  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText('https://example.com');
      alert('链接已复制');
    } catch (err) {
      console.error('复制失败:', err);
    }
  };

  return <button onClick={copyToClipboard}>复制链接</button>;
}

封装为可复用的 Hook

将复制逻辑抽象为自定义 Hook，方便多处调用：

import { useState } from 'react';

function useCopyToClipboard() {
  const [isCopied, setIsCopied] = useState(false);

  const copy = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 2000);
    } catch (err) {
      console.error('复制失败:', err);
    }
  };

  return [isCopied, copy];
}

// 使用示例
function CopyLinkButton() {
  const [isCopied, copy] = useCopyToClipboard();

  return (
    <button onClick={() => copy('https://example.com')}>
      {isCopied ? '已复制!' : '复制链接'}
    </button>
  );
}