在 React 中实现复制到剪贴板功能

1. 在 React 中使用 e.clipboardData.setData() 方法复制到剪贴板
2. 在 React 中使用 navigator.clipboard.writeText() 复制到剪贴板
3. 使用 react-copy-to-clipboard 包复制到剪贴板

复制和粘贴是在各种设备和操作系统中使用的普遍流行的功能。

在开发应用程序时，有时你可以预测需要复制特定值，例如一段文本。在这些情况下，你可以实现一个自动复制它的按钮。这很有用，因为使用手机的人有时可能难以选择文本。

ReactJS 经过优化，可以开发用户友好的应用程序。该框架可以轻松实现复制一段文本的可点击按钮（或链接）。

在 React 中使用 e.clipboardData.setData() 方法复制到剪贴板

此方法提供了一种简单的方法来侦听事件并在事件发生后复制文本。你的处理程序需要接收对浏览器事件的引用。

在 React 中，这将是 SyntheticEvent 的一个实例，简称为 e。让我们看一个简单的例子：

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    const handleCopy = (e) => {
      e.preventDefault()
      e.clipboardData.setData("Text", this.state.text)
    } 
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={(e) => handleCopy(e)}>Copy Text</button>
      </div>)
  }
}

在这个例子中，我们在 text state 属性中存储了一个文本值。然后，一旦按钮被点击，我们就会执行处理程序，它使用 e.clipboardData.setData() 方法将文本推送到剪贴板。

该方法有两个参数：复制值的类型和值本身。

据 caniuse.com 称，全球 95% 的互联网浏览者都使用支持此功能的浏览器。所以使用起来是安全的。

在 React 中使用 navigator.clipboard.writeText() 复制到剪贴板

Navigator 界面是一个更现代的 API。它为世界各地的用户提供几乎相同的支持 (92%)。它与功能和类组件兼容。

让我们看一个例子：

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={() => navigator.clipboard.writeText(this.state.text)}>Copy Text</button>
      </div>)
  }
}

如你所见，这是一个更简单的解决方案，需要更少的代码行。它不需要你导入任何值或安装外部包。

仅出于这个原因，对我来说，Navigator 界面是将文本复制到剪贴板的更好方法。你可以在 playcode 上自己尝试一下。

在使用 Navigator 界面之前，你应该记住旧版本的 Internet Explorer 不支持它。此外，在 Chrome 中，似乎 Navigator 界面只在页面被标记为安全（HTTPS 或 localhost）时才有效。

除了这两点之外，使用这种方法没有任何缺点。

使用 react-copy-to-clipboard 包复制到剪贴板

如果你不反对安装外部软件包，react-copy-to-clipboard 可能是你最好的解决方案。要获得有关不同功能的深入信息，请查看其官方 npm 页面。

安装后，你将可以访问自定义 <CopyToClipboard> 组件。你可以使用其 text 属性来提供需要复制的值。然后你可以添加一个简单的 <button> 组件，它将作为触发器将文本值复制到剪贴板。