我使用的是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()
}
当前回答
您可以使用事件clipboardData收集方法e.clipboardData。setData(类型、内容)。
在我看来，这是实现在剪贴板内推送一些东西的最直接的方法，看看这个(我用它来修改数据，而本地复制动作):
...
handleCopy = (e) => {
e.preventDefault();
e.clipboardData.setData('text/plain', 'Hello, world!');
}
render = () =>
<Component
onCopy={this.handleCopy}
/>
我选择了这个路径:https://developer.mozilla.org/en-US/docs/Web/Events/copy
干杯!
编辑:出于测试目的，我添加了代码依赖:https://codepen.io/dprzygodzki/pen/ZaJMKb
其他回答
导航器。剪贴板不工作在HTTP连接根据他们的文档。所以你可以检查它是否未定义，并使用document.execCommand('copy')来代替，这个解决方案应该涵盖几乎所有的浏览器
const defaultCopySuccessMessage = 'ID copied!'
const CopyItem = (props) => {
const { copySuccessMessage = defaultCopySuccessMessage, value } = props
const [showCopySuccess, setCopySuccess] = useState(false)
function fallbackToCopy(text) {
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
return window.clipboardData.setData('Text', text)
} else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
const textarea = document.createElement('textarea')
textarea.innerText = text
// const parentElement=document.querySelector(".up-CopyItem-copy-button")
const parentElement = document.getElementById('copy')
if (!parentElement) {
return
}
parentElement.appendChild(textarea)
textarea.style.position = 'fixed' // Prevent scrolling to bottom of page in MS Edge.
textarea.select()
try {
setCopySuccess(true)
document.execCommand('copy') // Security exception may be thrown by some browsers.
} catch (ex) {
console.log('Copy to clipboard failed.', ex)
return false
} finally {
parentElement.removeChild(textarea)
}
}
}
const copyID = () => {
if (!navigator.clipboard) {
fallbackToCopy(value)
return
}
navigator.clipboard.writeText(value)
setCopySuccess(true)
}
return showCopySuccess ? (
<p>{copySuccessMessage}</p>
) : (
<span id="copy">
<button onClick={copyID}>Copy Item </button>
</span>
)
}
您可以在任何地方调用和重用该组件
const Sample=()=>(
<CopyItem value="item-to-copy"/>
)
找到了最好的方法。我是说最快的方法: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>
</>
)
}
您可以使用事件clipboardData收集方法e.clipboardData。setData(类型、内容)。
在我看来，这是实现在剪贴板内推送一些东西的最直接的方法，看看这个(我用它来修改数据，而本地复制动作):
...
handleCopy = (e) => {
e.preventDefault();
e.clipboardData.setData('text/plain', 'Hello, world!');
}
render = () =>
<Component
onCopy={this.handleCopy}
/>
我选择了这个路径:https://developer.mozilla.org/en-US/docs/Web/Events/copy
干杯!
编辑:出于测试目的，我添加了代码依赖:https://codepen.io/dprzygodzki/pen/ZaJMKb
首先创建BTN，然后添加这个onClick:
onClick={() => navigator.clipboard.writeText(textState)}
or
onClick={() => navigator.clipboard.writeText('Your text for copy')}
copyclip = (item) => {
var textField = document.createElement('textarea')
textField.innerText = item
document.body.appendChild(textField)
textField.select()
document.execCommand('copy')
this.setState({'copy':"Copied"});
textField.remove()
setTimeout(() => {
this.setState({'copy':""});
}, 1000);
}
<span className="cursor-pointer ml-1" onClick={()=> this.copyclip(passTextFromHere)} >Copy</span> <small>{this.state.copy}</small>
