当前位置：首页 > React

react如何复制粘贴

2026-03-10 22:17:41React

在React中实现复制粘贴功能

使用Clipboard API React应用中可以调用浏览器原生的Clipboard API实现复制粘贴功能。现代浏览器都支持这个API，无需额外安装库。

复制文本到剪贴板：

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

从剪贴板读取文本：

const pasteFromClipboard = async () => {
  try {
    const text = await navigator.clipboard.readText();
    console.log('剪贴板内容:', text);
    return text;
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
};

使用react-copy-to-clipboard库

对于需要兼容旧浏览器或简化操作的情况，可以使用第三方库react-copy-to-clipboard。

安装库：

npm install react-copy-to-clipboard

使用示例：

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

function App() {
  const [copied, setCopied] = useState(false);

  return (
    <div>
      <CopyToClipboard text="要复制的文本" onCopy={() => setCopied(true)}>
        <button>复制文本</button>
      </CopyToClipboard>
      {copied && <span>已复制!</span>}
    </div>
  );
}

处理粘贴事件

在输入框中监听粘贴事件：

function handlePaste(e) {
  const pastedText = e.clipboardData.getData('text/plain');
  console.log('粘贴的内容:', pastedText);
  // 处理粘贴内容
}

<input onPaste={handlePaste} />

安全注意事项

浏览器对剪贴板访问有安全限制：

需要用户主动触发（如点击事件）
HTTPS环境下或localhost才能正常工作
某些浏览器可能需要请求权限

兼容性处理

对于不支持Clipboard API的旧浏览器，可以使用document.execCommand方法作为回退方案：

react如何复制粘贴

const copyFallback = (text) => {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
};

标签: react