react如何自动复制文本

使用 Clipboard API 实现复制

React 中可以通过 navigator.clipboard.writeText() 方法实现文本复制。该方法返回一个 Promise，需处理成功或失败状态。

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

创建可复制的按钮组件

将复制逻辑封装成可复用的 React 组件，结合用户交互触发复制操作。

import React from 'react';

const CopyButton = ({ text }) => {
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      alert('已复制: ' + text);
    } catch (err) {
      alert('复制失败');
    }
  };

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

兼容旧浏览器的降级方案

对于不支持 Clipboard API 的浏览器（如 IE），可使用 document.execCommand('copy') 作为备选方案。

const fallbackCopy = (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);
  } finally {
    document.body.removeChild(textarea);
  }
};

结合 useState 管理复制状态

通过 React 状态管理显示复制成功/失败的反馈信息，提升用户体验。

import React, { useState } from 'react';

const SmartCopyButton = ({ text }) => {
  const [copied, setCopied] = useState(false);

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

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

自动复制输入框内容

实现自动监听输入框变化并复制内容的逻辑，适合表单场景。

import React, { useEffect, useRef } from 'react';

const AutoCopyInput = ({ value }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current && value) {
      inputRef.current.select();
      navigator.clipboard.writeText(value);
    }
  }, [value]);

  return <input ref={inputRef} value={value} readOnly />;
};