react如何自动复制文本

使用 Clipboard API

React 应用中可以通过 Clipboard API 实现文本自动复制。现代浏览器支持 navigator.clipboard.writeText() 方法，调用时会返回一个 Promise。

const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
};

// 在组件中调用
<button onClick={() => copyToClipboard('要复制的文本')}>复制</button>

兼容旧版浏览器的 document.execCommand

对于不支持 Clipboard API 的旧浏览器，可以使用 document.execCommand('copy') 方法。需要先创建一个隐藏的 textarea 或 input 元素。

const copyToClipboardFallback = (text) => {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand('copy');
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
  document.body.removeChild(textarea);
};

使用第三方库简化操作

react-copy-to-clipboard 库封装了复制逻辑，提供更简洁的 React 组件和 Hook 用法。

安装库：

npm install react-copy-to-clipboard

组件用法：

import { CopyToClipboard } from 'react-copy-to-clipboard';

<CopyToClipboard text="要复制的文本">
  <button>复制</button>
</CopyToClipboard>

Hook 用法：

import { useCopyToClipboard } from 'react-copy-to-clipboard';

const [isCopied, copy] = useCopyToClipboard();
<button onClick={() => copy('要复制的文本')}>
  {isCopied ? '已复制!' : '复制'}
</button>

自动触发的实现方案

若需在特定事件（如页面加载、数据变化）时自动复制，可在 useEffect 中调用复制方法。

import { useEffect } from 'react';

function AutoCopyComponent({ text }) {
  useEffect(() => {
    const copyText = async () => {
      try {
        await navigator.clipboard.writeText(text);
        console.log('自动复制成功');
      } catch (err) {
        console.error('自动复制失败:', err);
      }
    };
    copyText();
  }, [text]); // 当text变化时触发

  return <div>{text}</div>;
}

权限与安全限制

浏览器要求复制操作必须由用户手势（如点击）触发，部分场景下自动复制可能被拦截。解决方法是：

• 在按钮点击事件中调用复制方法
• 使用 Toast 提示用户手动触发
• 移动端可能需要添加权限请求逻辑

// 检查权限状态
navigator.permissions.query({ name: 'clipboard-write' })
  .then(result => {
    if (result.state === 'granted') {
      console.log('有剪贴板写入权限');
    }
  });