react实现复制功能
使用 Clipboard API 实现复制
React 中可以通过 Clipboard API 实现复制功能。现代浏览器支持 navigator.clipboard.writeText() 方法，将指定文本写入剪贴板。
const handleCopy = async (text) => {
try {
await navigator.clipboard.writeText(text);
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
};使用 document.execCommand 兼容旧浏览器
对于不支持 Clipboard API 的旧浏览器，可以使用 document.execCommand('copy') 方法。需要先选中文本再执行复制。
const handleCopyLegacy = (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';
function App() {
return (
<CopyToClipboard text="要复制的文本">
<button>点击复制</button>
</CopyToClipboard>
);
}处理复制反馈
为用户提供复制成功或失败的视觉反馈很重要，可以使用状态管理来实现。
import { useState } from 'react';
function CopyButton({ text }) {
const [isCopied, setIsCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(text);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 2000);
} catch (err) {
console.error('复制失败:', err);
}
};
return (
<button onClick={handleCopy}>
{isCopied ? '已复制!' : '点击复制'}
</button>
);
}安全注意事项
使用 Clipboard API 时需要注意：
- 仅在安全上下文（HTTPS 或 localhost）中可用
- 需要用户交互（如点击事件）才能触发
- 可能会被浏览器权限设置阻止
完整组件示例
import { useState } from 'react';
function CopyToClipboardButton({ textToCopy }) {
const [copyStatus, setCopyStatus] = useState('');
const handleCopy = async () => {
if (!navigator.clipboard) {
setCopyStatus('浏览器不支持复制功能');
return;
}
try {
await navigator.clipboard.writeText(textToCopy);
setCopyStatus('复制成功');
setTimeout(() => setCopyStatus(''), 2000);
} catch (err) {
setCopyStatus('复制失败');
console.error('复制错误:', err);
}
};
return (
<div>
<button onClick={handleCopy}>复制文本</button>
{copyStatus && <span>{copyStatus}</span>}
</div>
);
}这些方法涵盖了 React 中实现复制功能的主要方式，可以根据项目需求和浏览器兼容性要求选择适合的方案。
