react复制到粘贴板

在 React 中，你可以使用 `react-copy-to-clipboard` 这个库来实现复制文本到粘贴板的功能。首先，你需要安装该库：

npm install react-copy-to-clipboard

接下来，你可以在你的组件中使用 `CopyToClipboard` 组件，并将要复制的文本作为子元素传递给它。例如，如果你想复制一个字符串 "Hello, world!" 到粘贴板，可以像这样使用：

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

function MyComponent() {
  const text = "Hello, world!";

  return (
    <div>
      <CopyToClipboard text={text}>
        <button>复制到粘贴板</button>
      </CopyToClipboard>
    </div>
  );
}

当用户点击按钮时，`text` 的内容将被复制到粘贴板中。你还可以通过检查 `onCopy` 属性来执行其他操作或提供用户反馈。例如，你可以在 `onCopy` 中设置一个状态来显示复制成功的消息：

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

function MyComponent() {
  const text = "Hello, world!";
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    setCopied(true);
  };

  return (
    <div>
      <CopyToClipboard text={text} onCopy={handleCopy}>
        <button>复制到粘贴板</button>
      </CopyToClipboard>
      {copied && <span>已复制到粘贴板！</span>}
    </div>
  );
}

这样，当用户点击按钮并成功复制文本到粘贴板时，将显示 "已复制到粘贴板！" 的消息。