![剪贴板]( "剪贴板")
本文介绍了在 React 中使用 document.execCommand 将文本从 div 复制到剪贴板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在缩短 URL 后从 div 复制文本.
我在 div 中放置了一个 ref 值，它将呈现缩短的 URL.但是，我收到错误:
TypeError: inputArea.input.select() 不是函数.
我不知道如何引用 div 中的文本.
import { useCallback, useEffect, useRef, useState } from react";const 缩短 = () =>{const [copySuccess, setCopySuccess] = useState('');const inputArea = useRef(null);函数复制链接(e){inputArea.current.select();document.execCommand('copy');e.target.focus();setCopySuccess('复制成功！');};{isPending &&<div className="loading-text">加载中...</div>}{shortLink &&<div ref={inputArea} className=shorten-text">{shortLink}</div>}<hr></hr><div><button className="shorten-it";onClick={copyLink} >Copy</button>{复制成功}
</节>
解决方案
Document.execCommand 将被弃用以支持现代 剪贴板 API 与 剪贴板.
以下是如何使用 剪贴板 API:
function updateClipboard(newClip) {navigator.clipboard.writeText(newClip).then(() =>{setCopySuccess(已复制！");},() =>{setCopySuccess(复制失败！");});}函数复制链接(){navigator.permissions.query({ 名称:剪贴板写入"}).then((结果) => {if (result.state === "granted" || result.state === "prompt") {updateClipboard(inputArea.current?.innerText);}});}
关于使用 Clipboard API 的注意事项:
剪贴板 API 增加了更大的灵活性，因为您不限于将当前选择复制到剪贴板，而是可以直接指定将哪些信息放入剪贴板剪贴板.
使用 API 要求您具有权限clipboardRead"；或剪贴板写入"在您的 manifest.json 文件中.
剪贴板写入权限自动授予处于活动选项卡中的页面.必须请求剪贴板读取权限，您可以尝试从剪贴板读取数据.
剪贴板 API(剪贴板写入权限)目前不受 Firefox 支持，但由铬/铬
或者，要使用 Document.execCommand，您应该将 div 转换为 input 或 textarea (可以选择)并使用 CSS 使其看起来像一个 div:
function copyLink(e) {inputArea.current?.select();document.execCommand(复制");e.target.focus();setCopySuccess(已复制！");}//...{shortLink &&(
或者，如果您仍想使用 div，请参阅如何将文本从 div 复制到剪贴板/代码>.
I am attempting to copy text from a div after the URL is shortened.
I have placed a ref value in the div that will render the shortend URL. But, I am getting error:
I am not sure how to reference the text within the div.
import { useCallback, useEffect, useRef, useState } from "react";
const Shorten = () => {
const [copySuccess, setCopySuccess] = useState('');
const inputArea = useRef(null);
function copyLink(e){
inputArea.current.select();
document.execCommand('copy');
e.target.focus();
setCopySuccess('Copied!');
};
{isPending && <div className="loading-text">Loading...</div>}
{shortLink && <div ref={inputArea} className="shorten-text">{shortLink}</div>}
<hr></hr>
<div>
<button className="shorten-it" onClick={copyLink} >Copy</button>
{copySuccess}
</div>
</section>
解决方案
Document.execCommand will get deprecated in favor of the modern Clipboard API to interact with clipboard.
Here is how to use Clipboard API:
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(
() => {
setCopySuccess("Copied!");
},
() => {
setCopySuccess("Copy failed!");
}
);
}
function copyLink() {
navigator.permissions
.query({ name: "clipboard-write" })
.then((result) => {
if (result.state === "granted" || result.state === "prompt") {
updateClipboard(inputArea.current?.innerText);
}
});
}
Notes about using Clipboard API:
Or, to use Document.execCommand, you should convert the div into an input or textarea (which can be selected) and use CSS to make it look like a div:
function copyLink(e) {
inputArea.current?.select();
document.execCommand("copy");
e.target.focus();
setCopySuccess("Copied!");
}
// ...
{shortLink && (
<input
ref={inputArea}
type="text"
className="shorten-text"
value={shortLink}
/>
)}
Or, see How to copy text from a div to clipboard if you still want to use div.
这篇关于在 React 中使用 document.execCommand 将文本从 div 复制到剪贴板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！