react如何自动复制文本

使用 Clipboard API

React 中可以通过 Clipboard API 实现文本自动复制。现代浏览器支持 navigator.clipboard.writeText 方法，可以直接将文本写入剪贴板。

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

在 React 组件中调用该方法，可以通过按钮点击或其他事件触发：

import React from 'react';

function CopyButton() {
  const handleCopy = () => {
    copyToClipboard('需要复制的文本');
  };

  return (
    <button onClick={handleCopy}>复制文本</button>
  );
}

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

对于不支持 Clipboard API 的旧浏览器，可以使用 document.execCommand 方法。需要创建一个临时的 textarea 或 input 元素来辅助复制。

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

使用第三方库

如果需要更复杂的剪贴板操作或更好的兼容性，可以使用第三方库如 react-copy-to-clipboard。安装后可以轻松实现复制功能。

npm install react-copy-to-clipboard

使用示例：

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

function App() {
  return (
    <CopyToClipboard text="需要复制的文本">
      <button>复制文本</button>
    </CopyToClipboard>
  );
}

处理复制后的反馈

为了提高用户体验，可以在复制成功后显示提示信息（如 Toast 或 Alert）。

import React, { useState } from 'react';
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 style={{ color: 'green' }}>已复制!</span>}
    </div>
  );
}

自动复制无需用户操作

如果需要自动复制文本而不需要用户点击，可以在组件挂载时或特定条件下触发复制逻辑。

import React, { useEffect } from 'react';

function AutoCopy() {
  useEffect(() => {
    copyToClipboard('自动复制的文本');
  }, []);

  return <div>文本已自动复制到剪贴板</div>;
}