[英]In reactJS, how to copy text to clipboard?
我正在使用 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()
}
如果您想以编程方式将数据写入剪贴板,请在按钮上使用这个简单的内联 onClick function。
onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}
我个人认为不需要图书馆。 查看http://caniuse.com/#feat=clipboard它现在得到了相当广泛的支持,但是您仍然可以执行检查以查看当前客户端中是否存在该功能,如果不存在则简单地隐藏复制按钮。
import React from 'react';
class CopyExample extends React.Component {
constructor(props) {
super(props);
this.state = { copySuccess: '' }
}
copyToClipboard = (e) => {
this.textArea.select();
document.execCommand('copy');
// This is just personal preference.
// I prefer to not show the whole text area selected.
e.target.focus();
this.setState({ copySuccess: 'Copied!' });
};
render() {
return (
<div>
{
/* Logical shortcut for only displaying the
button if the copy command exists */
document.queryCommandSupported('copy') &&
<div>
<button onClick={this.copyToClipboard}>Copy</button>
{this.state.copySuccess}
</div>
}
<form>
<textarea
ref={(textarea) => this.textArea = textarea}
value='Some text to copy'
/>
</form>
</div>
);
}
}
export default CopyExample;
更新:在 React 16.7.0-alpha.0 中使用 React Hooks 重写
import React, { useRef, useState } from 'react';
export default function CopyExample() {
const [copySuccess, setCopySuccess] = useState('');
const textAreaRef = useRef(null);
function copyToClipboard(e) {
textAreaRef.current.select();
document.execCommand('copy');
// This is just personal preference.
// I prefer to not show the whole text area selected.
e.target.focus();
setCopySuccess('Copied!');
};
return (
<div>
{
/* Logical shortcut for only displaying the
button if the copy command exists */
document.queryCommandSupported('copy') &&
<div>
<button onClick={copyToClipboard}>Copy</button>
{copySuccess}
</div>
}
<form>
<textarea
ref={textAreaRef}
value='Some text to copy'
/>
</form>
</div>
);
}
您可以在不需要外部库的情况下完成此操作,例如:在按钮内
<button
onClick={() => navigator.clipboard.writeText('Copy this text to clipboard')}
>
Copy
</button>
对于 internet explorer 11 和更旧的浏览器,您可能需要稍微更改代码这里是一个示例:
<button
onClick={() => window.clipboardData.setData("Text", 'Copy this text to clipboard')}>
Copy
</button>
希望这可以帮助。
您绝对应该考虑使用 package 像上面的@Shubham 建议,但我根据您的描述创建了一个工作代码笔: http://codepen.io/dtschust/pen/WGwdVN?editors=1111 。 它可以在我的 chrome 浏览器中运行,也许您可以查看我在那里所做的某些事情您错过了,或者您的应用程序中是否存在一些扩展的复杂性阻止它工作。
// html
<html>
<body>
<div id="container">
</div>
</body>
</html>
// js
const Hello = React.createClass({
copyToClipboard: () => {
var textField = document.createElement('textarea')
textField.innerText = 'foo bar baz'
document.body.appendChild(textField)
textField.select()
document.execCommand('copy')
textField.remove()
},
render: function () {
return (
<h1 onClick={this.copyToClipboard}>Click to copy some text</h1>
)
}
})
ReactDOM.render(
<Hello/>,
document.getElementById('container'))
最简单的方法是使用react-copy-to-clipboard
npm package。
您可以使用以下命令安装它
npm install --save react react-copy-to-clipboard
请按以下方式使用它。
const App = React.createClass({
getInitialState() {
return {value: '', copied: false};
},
onChange({target: {value}}) {
this.setState({value, copied: false});
},
onCopy() {
this.setState({copied: true});
},
render() {
return (
<div>
<input value={this.state.value} size={10} onChange={this.onChange} />
<CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
<button>Copy</button>
</CopyToClipboard>
<div>
{this.state.copied ? <span >Copied.</span> : null}
</div>
<br />
<input type="text" />
</div>
);
}
});
ReactDOM.render(<App />, document.getElementById('container'));
以下链接提供了详细说明
https://www.npmjs.com/package/react-copy-to-clipboard
这是一个正在运行的小提琴。
带有反应钩子的最佳解决方案,不需要外部库
import React, { useState } from 'react'; const MyComponent = () => { const [copySuccess, setCopySuccess] = useState(''); // your function to copy here const copyToClipBoard = async copyMe => { try { await navigator.clipboard.writeText(copyMe); setCopySuccess('Copied;'); } catch (err) { setCopySuccess('Failed to copy;') } } return ( <div> <Button onClick={() => copyToClipBoard('some text to copy')}> Click here to copy </Button> // after copying see the message here {copySuccess} </div> ) }
在此处查看有关 navigator.clip board 的更多文档 ,navigator.clipboard 文档navigotor.clipboard 受到大量浏览器的支持查看此处支持的浏览器
剪贴板在 2021 年得到主流浏览器的良好支持。 一种方法是首先将副本构建到剪贴板 function ,然后使用onClick
事件处理程序调用它。
function copy(text){
navigator.clipboard.writeText(text)
}
为了防止硬编码,假设string
被分配给名为someText
的变量
<span onClick={() => copy(someText)}>
{someText}
</span>
您可以使用事件剪贴板数据收集方法e.clipboardData.setData(type, content)
。
在我看来,这是实现在剪贴板中推送内容的最直接方法,请检查一下(我在本机复制操作时使用它来修改数据):
...
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
干杯
编辑:出于测试目的,我添加了codepen: https://codepen.io/dprzygodzki/pen/ZaJMKb
我采取了与上述一些方法非常相似的方法,但我认为它更具体一些。 在这里,父组件将 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>
);
};
您的代码应该可以完美运行,我以同样的方式使用它。 仅确保如果单击事件是从弹出屏幕(如引导模式或其他内容)中触发的,则创建的元素必须在该模式中,否则不会复制。 您始终可以在该模式中提供元素的 id(作为第二个参数)并使用 getElementById 检索它,然后 append 将新创建的元素添加到该元素而不是文档。 像这样的东西:
copyToClipboard = (text, elementId) => {
const textField = document.createElement('textarea');
textField.innerText = text;
const parentElement = document.getElementById(elementId);
parentElement.appendChild(textField);
textField.select();
document.execCommand('copy');
parentElement.removeChild(textField);
}
const copyToClipboard = e => {
navigator.clipboard.writeText(window.location.toString())
}
<button copyToClipboard={shareLink}>
Click to copy current url to clipboard
</button>
这对我有用:
const handleCopyLink = useCallback(() => {
const textField = document.createElement('textarea')
textField.innerText = url
document.body.appendChild(textField)
if (window.navigator.platform === 'iPhone') {
textField.setSelectionRange(0, 99999)
} else {
textField.select()
}
document.execCommand('copy')
textField.remove()
}, [url])
简单的答案将是
navigator.clipboard.writeText("值")
使用此命令将您的值传递给 function
var promise = navigator.clipboard.writeText(newClipText)
对于那些试图从 DIV 而不是文本字段 select 的人,这里是代码。 该代码是不言自明的,但如果您想了解更多信息,请在此处评论:
import React from 'react';
....
//set ref to your div
setRef = (ref) => {
// debugger; //eslint-disable-line
this.dialogRef = ref;
};
createMarkeup = content => ({
__html: content,
});
//following function select and copy data to the clipboard from the selected Div.
//Please note that it is only tested in chrome but compatibility for other browsers can be easily done
copyDataToClipboard = () => {
try {
const range = document.createRange();
const selection = window.getSelection();
range.selectNodeContents(this.dialogRef);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
this.showNotification('Macro copied successfully.', 'info');
this.props.closeMacroWindow();
} catch (err) {
// console.log(err); //eslint-disable-line
//alert('Macro copy failed.');
}
};
render() {
return (
<div
id="macroDiv"
ref={(el) => {
this.dialogRef = el;
}}
// className={classes.paper}
dangerouslySetInnerHTML={this.createMarkeup(this.props.content)}
/>
);
}
根据他们的文档,navigator.clipboard 在 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"/>
)
import React, { Component } from 'react';
export default class CopyTextOnClick extends Component {
copyText = () => {
this.refs.input.select();
document.execCommand('copy');
return false;
}
render () {
const { text } = this.state;
return (
<button onClick={ this.copyText }>
{ text }
<input
ref="input"
type="text"
defaultValue={ text }
style={{ position: 'fixed', top: '-1000px' }} />
</button>
)
}
}
您可以简单地使用npm包copy-to-clipboard
。 查看以下示例,将文本复制到剪贴板。 这是该示例的逐步说明。
import React, { Component } from 'react';
import copy from "copy-to-clipboard";
class App extends Component {
constructor() {
super();
this.state = {
textToCopy: "Copy to Clipboard Demo!",
btnText: "Copy to Clipboard"
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleCopy = this.handleCopy.bind(this);
}
handleInputChange(e) {
this.setState({
textToCopy: e.target.value,
btnText: "Copy to Clipboard"
});
}
handleCopy() {
copy(this.state.textToCopy);
this.setState({ btnText: "Copied!" });
}
render() {
const { textToCopy, btnText } = this.state;
return (
<div>
<h4>Clue Mediator - Copy to Clipboard</h4>
<textarea value={textToCopy} onChange={this.handleInputChange} />
<br />
<br />
<button onClick={this.handleCopy} disabled={btnText === "Copied!"}>
{btnText}
</button>
</div>
);
}
}
为了更好地理解,我还准备了一个CodeSandbox 。 希望有帮助。
import { useState } from "react";
import { IconButton, Snackbar } from "@mui/material";
import ShareIcon from "@mui/icons-material/Share";
const CopyToClipboardButton = () => {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen(true);
navigator.clipboard.writeText(window.location.toString());
};
return (
<>
<IconButton onClick={handleClick} color="primary">
<ShareIcon />
</IconButton>
<Snackbar
message="Copied to clibboard"
anchorOrigin={{ vertical: "top", horizontal: "center" }}
autoHideDuration={20000}
onClose={() => setOpen(false)}
open={open}
/>
</>
);
};
export default CopyToClipboardButton;
这是按钮的样子:
当你点击它时:
资料来源: https://fwuensche.medium.com/react-button-to-copy-to-clipboard-75ef5ecdc708
无需安装第三方软件包。 我尽量保持简单。 这对我来说效果很好。
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>
)
}
如果你想 select 从 DIV 而不是文本字段,这里是代码。 “代码”是必须复制的值
import React from 'react'
class CopyToClipboard extends React.Component {
copyToClipboard(code) {
var textField = document.createElement('textarea')
textField.innerText = code
document.body.appendChild(textField)
textField.select()
document.execCommand('copy')
textField.remove()
}
render() {
return (
<div onClick={this.copyToClipboard.bind(this, code)}>
{code}
</div>
)
}
}
export default CopyToClipboard
找到了最好的方法。 我的意思是最快的方法:w3school
https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
在反应功能组件内部。 创建一个名为 handleCopy 的 function:
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 并敬酒 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ:
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>
</>
)
}
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>
const handleCopy = async () => {
let copyText = document.getElementById('input') as HTMLInputElement;
copyText.select();
document.execCommand('copy');
};
return (
<TextField
variant="outlined"
value={copyText}
id="input"
/>
);
这对我来说是工作。
这是我的代码:
import React from 'react'
class CopyToClipboard extends React.Component {
textArea: any
copyClipBoard = () => {
this.textArea.select()
document.execCommand('copy')
}
render() {
return (
<>
<input style={{display: 'none'}} value="TEXT TO COPY!!" type="text" ref={(textarea) => this.textArea = textarea} />
<div onClick={this.copyClipBoard}>
CLICK
</div>
</>
)
}
}
export default CopyToClipboard
<input
value={get(data, "api_key")}
styleName="input-wrap"
title={get(data, "api_key")}
ref={apikeyObjRef}
/>
<div
onClick={() => {
apikeyObjRef.current.select();
if (document.execCommand("copy")) {
document.execCommand("copy");
}
}}
styleName="copy"
>
复制
</div>
您还可以使用以下代码在 function 组件或无状态组件中使用反应挂钩: PS:确保使用以下命令通过 npm/yarn 安装 useClippy:npm install use-clippy 或 yarn add use-clippy
import React from 'react';
import useClippy from 'use-clippy';
export default function YourComponent() {
// clipboard is the contents of the user's clipboard.
// setClipboard('new value') wil set the contents of the user's clipboard.
const [clipboard, setClipboard] = useClippy();
return (
<div>
{/* Button that demonstrates reading the clipboard. */}
<button
onClick={() => {
alert(`Your clipboard contains: ${clipboard}`);
}}
>
Read my clipboard
</button>
{/* Button that demonstrates writing to the clipboard. */}
<button
onClick={() => {
setClipboard(`Random number: ${Math.random()}`);
}}
>
Copy something
</button>
</div>
);
}
您可以在元素内使用 useRef 到 select 文本,然后将其复制到剪贴板
import React, { useRef } from "react";
const Comp = () => {
const copyTxt = useRef();
const handleCopyTxt = () => {
let txtDiv = copyTxt.current;
if (document.selection) {
// IE
var range = document.body.createTextRange();
range.moveToElementText(txtDiv);
range.select();
} else if (window.getSelection) {
// other browsers
var range = document.createRange();
range.selectNode(txtDiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
document.execCommand("copy");
}
return ( <div ref={copyTxt} > some text to copied </div> )
}
受@nate 的回答启发,我创建了一个withCopyText
反应钩子。 并且,添加了带有execCommand
后备的navigator.clipboard.writeText
支持。
钩子意味着它可以在许多组件中重用,而无需重复代码。 有关实现,请参见示例组件CopyText
。
import React, { useRef, useState } from 'react';
const withCopyText = (textElementRef) => {
if (!textElementRef) throw 'withCopyText: ref is required';
const [copyStatus, setCopyStatus] = useState('');
const [support, setSupport] = useState({
navigatorClipboard: !!navigator.clipboard,
exec: !!document.queryCommandSupported('copy'),
});
const copyToClipboard = (e) => {
if ('' !== copyStatus) {
setCopyStatus('');
await new Promise((resolve) => setTimeout(resolve, 200));
}
// clipboard.writeText has wide but not 100% support
// https://caniuse.com/?search=writeText
if (support.navigatorClipboard) {
try {
navigator.clipboard.writeText(textElementRef.current.value);
return setCopyStatus('success');
} catch (e) {
setSupport({ ...support, navigatorClipboard: false });
}
}
// execCommand has > 97% support but is deprecated, use it as a fallback
// https://caniuse.com/?search=execCommand
// https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
if (!support.navigatorClipboard) {
try {
textElementRef.current.select();
document.execCommand('copy');
e.target.focus();
setCopyStatus('success');
} catch (e) {
setSupport({ ...support, exec: false });
return setCopyStatus('fail');
}
}
};
return {
copyStatus,
copyToClipboard,
support: Object.values(support).includes(true),
};
};
const CopyText = ({ text }) => {
const textElementRef = useRef(null);
const { copyStatus, copyToClipboard, support } = withCopyText(textElementRef);
return (
<span>
{support && <button onClick={copyToClipboard}>Copy</button>}
{'success' === copyStatus && <span>Copied to clipboard!</span>}
{'fail' === copyStatus && <span>Sorry, copy to clipboard failed</span>}
<input type="text" ref={textElementRef} value={text} readOnly={true} />
</span>
);
};
export { CopyText, withCopyText };
对于 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>
make a componant as follows :-
//react functional componant
import React, { useState } from "react";
function CopyToClipboard(props) {
const [copied, setCopied] = useState("copy");
return (
<div
className="font-medium mr-4 text-green-700 cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(props.text);
setCopied("copied");
}}>
{copied}
</div>
);
}
export default CopyToClipboard;
//then use this componant anywhere
<CopyToClipboard text={"text you want to copy"}></CopyToClipboard>
//it will give a text saying "copy"`enter code here` and after clicking on that text, text provided with props will get copied
首先创建 BTN,然后添加这个 onClick:
onClick={() => navigator.clipboard.writeText(textState)}
或者
onClick={() => navigator.clipboard.writeText('Your text for copy')}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.