当前位置：首页 > React

react实现点击复制

2026-01-27 07:04:44React

实现点击复制的React方案

在React中实现点击复制功能通常使用document.execCommand或现代浏览器提供的Clipboard API。以下是两种主流实现方式：

使用document.execCommand（兼容旧浏览器）

创建一个可复制的文本区域，通过选择文本并执行复制命令：

import React, { useRef } from 'react';

function CopyButton({ text }) {
  const textAreaRef = useRef(null);

  const handleCopy = () => {
    textAreaRef.current.select();
    document.execCommand('copy');
    // 可添加复制成功提示
  };

  return (
    <div>
      <textarea
        ref={textAreaRef}
        value={text}
        readOnly
        style={{ position: 'absolute', left: '-9999px' }}
      />
      <button onClick={handleCopy}>复制</button>
    </div>
  );
}

使用Clipboard API（现代浏览器推荐）

更现代的解决方案，需要检查浏览器支持情况：

function CopyButton({ text }) {
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      // 可添加复制成功提示
    } catch (err) {
      console.error('复制失败:', err);
    }
  };

  return <button onClick={handleCopy}>复制</button>;
}

使用第三方库简化实现

对于更复杂的需求，可以使用如react-copy-to-clipboard等库：

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

function CopyButton({ text }) {
  return (
    <CopyToClipboard text={text}>
      <button>复制</button>
    </CopyToClipboard>
  );
}

样式和用户体验优化

添加复制反馈提升用户体验：

react实现点击复制

显示"已复制"提示
添加动画效果
对于移动端优化触摸事件

function CopyButton({ text }) {
  const [copied, setCopied] = React.useState(false);

  const handleCopy = async () => {
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <button onClick={handleCopy}>
      {copied ? '已复制!' : '复制'}
    </button>
  );
}