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

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中使用 e.clipboardData.setData() 方法复制到剪贴板
  2. 在 React 中使用 navigator.clipboard.writeText() 复制到剪贴板
  3. 使用 react-copy-to-clipboard 包复制到剪贴板
在 React 中实现复制到剪贴板功能

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

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

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> 组件,它将作为触发器将文本值复制到剪贴板。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn