我使用的是ReactJS,当用户点击一个链接时,我想复制一些文本到剪贴板。

我使用Chrome 52,我不需要支持任何其他浏览器。

我不明白为什么这段代码没有导致数据被复制到剪贴板。(代码片段的来源是Reddit的一篇帖子)。

我做错了吗?谁能建议有一个“正确”的方法来实现复制到剪贴板使用reactjs?

copyToClipboard = (text) => {
  console.log('text', text)
  var textField = document.createElement('textarea')
  textField.innerText = text
  document.body.appendChild(textField)
  textField.select()
  document.execCommand('copy')
  textField.remove()
}

当前回答

找到了最好的方法。我是说最快的方法:w3school

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

在react函数组件中。创建名为handleCopy的函数:

function handleCopy() {
  // get the input Element ID. Save the reference into copyText
  var copyText = document.getElementById("mail")
  // select() will select all data from this input field filled  
  copyText.select()
  copyText.setSelectionRange(0, 99999)
  // execCommand() works just fine except IE 8. as w3schools mention
  document.execCommand("copy")
  // alert the copied value from text input
  alert(`Email copied: ${copyText.value} `)
}

<>
              <input
                readOnly
                type="text"
                value="exemple@email.com"
                id="mail"
              />
              <button onClick={handleCopy}>Copy email</button>

</>

如果不使用React, w3schools也有一个很酷的方法来做到这一点,工具提示包括:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2

如果使用React,一个很酷的想法是:使用Toastify提醒消息。 https://github.com/fkhadra/react-toastify这是一个很容易使用的库。 安装后,你可以更改这一行:

 alert(`Email copied: ${copyText.value} `)

比如:

toast.success(`Email Copied: ${copyText.value} `)

如果你想使用它,不要忘记安装toastify。导入ToastContainer,同时也导入css:

import { ToastContainer, toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"

并将烤面包的容器放入里面返回。

import React from "react"

import { ToastContainer, toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"


export default function Exemple() {
  function handleCopy() {
    var copyText = document.getElementById("mail")
    copyText.select()
    copyText.setSelectionRange(0, 99999)
    document.execCommand("copy")
    toast.success(`Hi! Now you can: ctrl+v: ${copyText.value} `)
  }

  return (
    <>
      <ToastContainer />
      <Container>
                <span>E-mail</span>
              <input
                readOnly
                type="text"
                value="myemail@exemple.com"
                id="mail"
              />
              <button onClick={handleCopy}>Copy Email</button>
      </Container>
    </>
  )
}

其他回答

我采取了和上面一些非常相似的方法,但我认为它更具体一些。在这里,父组件将作为道具传递url(或任何您想要的文本)。

import * as React from 'react'

export const CopyButton = ({ url }: any) => {
  const copyToClipboard = () => {
    const textField = document.createElement('textarea');
    textField.innerText = url;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
  };

  return (
    <button onClick={copyToClipboard}>
      Copy
    </button>
  );
};

你可以做到这一点,而不需要一个外部库,例如:在一个按钮

<button 
  onClick={() =>  navigator.clipboard.writeText('Copy this text to clipboard')}
>
  Copy
</button>

对于ie11和更老的浏览器,你可能需要稍微改变一下代码,这里有一个例子:

<button 
  onClick={() =>  window.clipboardData.setData("Text", 'Copy this text to clipboard')}>
 Copy
</button>

针对React开发者

 const preventCopyPasteBody = (state) => {
       document.addEventListener(state, (evt) => {
      if (evt.target.id === 'body') {
             evt.preventDefault();
           return false;
          }
        return false;
       }, false);
      }

 preventCopyPasteBody ("contextmenu")
 preventCopyPasteBody ("copy")
 preventCopyPasteBody ("paste")
 preventCopyPasteBody ("cut")

<Typography id="body" variant="body1"  component="div" className={classes.text} style={{ fontSize: fontSize }}>{story}</Typography>

最简单的答案就是

navigator.clipboard.writeText(“价值”)

无需安装第三方软件包。我尽量让它简单。这对我来说很有效。

import React, { useState } from "react"    
function MyApp() {
    const [copySuccess, setCopySuccess] = useState(null);
    const copyToClipBoard = async copyMe => {
       try {
           await navigator.clipboard.writeText(copyMe);
           setCopySuccess('Copied!');
       } 
       catch (err) {
           setCopySuccess('Failed to copy!');
       }
    };
     
    return (
        <button onClick={(e) => copyToClipBoard(what you want to copy goes here)} >
           My button
        </button>    
       )
    }