React.js如何为现有按钮添加点击复制指定链接功能

实现方案 #

直接用浏览器原生的Clipboard API即可实现，不需要引入额外第三方依赖，修改后的完整代码如下：

import { useState } from 'react';
// 注意修改为你实际的Icon导入路径
import LinkIcon from './LinkIcon';

function CopyButton() {
  // 可选：用来给用户展示复制成功的反馈
  const [isCopied, setIsCopied] = useState(false);
  // 替换为你需要复制的目标链接
  const COPY_TARGET = "https://google.com";

  const handleCopyClick = async (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    try {
      await navigator.clipboard.writeText(COPY_TARGET);
      setIsCopied(true);
      // 2秒后重置文案
      setTimeout(() => setIsCopied(false), 2000);
    } catch (error) {
      console.error('复制失败，请检查浏览器权限：', error);
      // 可根据需求添加失败提示逻辑
    }
  };

  return (
    <a 
      href="#"
      onClick={handleCopyClick}
      className="group inline-flex items-center font-medium text-indigo-600 hover:text-indigo-900"
    >
      <LinkIcon 
        className="h-5 w-5 text-indigo-500 group-hover:text-indigo-900"
        aria-hidden="true"
      />
      <span className="ml-2">
        {isCopied ? '已复制' : 'Copy link'}
      </span>
    </a>
  );
}

export default CopyButton;

注意事项 #

• navigator.clipboard 是浏览器提供的原生API，仅支持在HTTPS环境和localhost本地开发环境下使用，属于浏览器安全限制
• 你可以根据需求删掉成功状态的逻辑，只保留核心的写入剪贴板代码即可
• 如果需要兼容非常旧的浏览器，可以引入第三方库clipboard.js实现相同功能

内容的提问来源于stack exchange，提问作者Julia Cassemiro