当前位置：首页 > React

react如何复制粘贴

2026-01-24 13:52:51React

在React中实现复制粘贴功能

React本身不直接提供复制粘贴的API，但可以通过以下几种方式实现：

使用document.execCommand方法

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

这种方法适用于简单的文本复制，但需要注意execCommand已被标记为废弃。

使用Clipboard API

现代浏览器提供了更强大的Clipboard API：

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

Clipboard API需要页面在安全上下文中运行(HTTPS或localhost)。

监听粘贴事件

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

// 在组件中
<div onPaste={handlePaste}>粘贴区域</div>

使用第三方库

一些流行的React复制粘贴库：

react-copy-to-clipboard
clipboard-polyfill
react-clipboard.js

以react-copy-to-clipboard为例：

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

<CopyToClipboard text="要复制的文本"
  onCopy={() => alert('已复制')}>
  <button>复制</button>
</CopyToClipboard>

处理富文本复制粘贴

对于富文本内容，可以使用以下方法：

react如何复制粘贴

const handlePaste = (e) => {
  const html = e.clipboardData.getData('text/html');
  const text = e.clipboardData.getData('text/plain');
  // 根据需求处理HTML或纯文本
};