如何在 React js 中复制到剪贴板 - Javascript

在React中复制到剪切板是一项非常有用的功能，在许多项目中都会用到，可以提供更好的用户体验。在这篇文章中，我们将讨论如何在React中实现这个功能。

使用 React 中的复制到剪贴板库

React中有许多第三方库可以方便地实现复制到剪贴板的功能。这些库大多数使用document.execCommand('copy')方法来复制文本到剪贴板中。我们列举几个常用的库：

• react-copy-to-clipboard
• react-clipboard.js
• react-copy-write

下面我们将介绍如何使用react-copy-to-clipboard库来实现复制到剪贴板的功能。

安装并引入 react-copy-to-clipboard

要在React中使用react-copy-to-clipboard库，首先要安装这个库，可以使用npm或者yarn来安装。

npm install react-copy-to-clipboard

或者

yarn add react-copy-to-clipboard

安装好库之后，我们需要在代码中引入这个库。

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

在 React 中实现复制到剪贴板

接下来我们将介绍如何在React中使用CopyToClipboard组件来实现复制到剪贴板的功能。

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

function App() {
  const [text, setText] = useState('Hello World!');
  const [copied, setCopied] = useState(false);

  const onCopyText = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <CopyToClipboard text={text} onCopy={onCopyText}>
        <button>Copy to Clipboard</button>
      </CopyToClipboard>
      {copied && <p>Copied to clipboard!</p>}
    </div>
  );
}

export default App;

我们首先定义了两个状态变量text和copied，text保存要复制到剪贴板的文本，copied用来保存是否复制成功的状态。在按钮中使用CopyToClipboard组件，并将text和onCopy方法作为props传递进去，onCopy方法在复制成功时会被调用。我们在onCopy方法中将copied的状态设置为true，2秒后再设置为false。最后，我们根据copied的状态来显示'Copied to clipboard!'文本。

总结

本文介绍了如何在React中使用react-copy-to-clipboard库来实现复制到剪贴板的功能。我们首先安装了这个库，并在代码中引入了CopyToClipboard组件。接下来，我们通过代码示例展示了如何使用该组件来实现复制到剪贴板的功能。