使用ReactJS将活动浏览器的URL复制到剪贴板

LiLi 发表于 Dev

丽丽

我试图编写一个函数，以便在单击链接时可以将当前浏览器的URL复制到剪贴板。我仍在尝试理解此代码，这时我不知道如何创建输入，将其值设置为当前文档的URL，选择其内容并执行复制，因为我知道这是一种破解方法它。现在，单击文本时出现错误：无法读取null的属性“选择” ...任何提示将不胜感激。

export function Copy() {
    const [copySuccess, setCopySuccess] = useState("")
    const textAreaRef = useRef(null)

    function copyToClip(e) {
        //navigator.clipboard.writeText(e.target.getAttribute("href"))
        textAreaRef.current.select()
        document.execCommand("copy")
        setCopySuccess("Copied")
    }

    return (
        <>
            {document.queryCommandSupported("copy") && (
                <Text onClick={copyToClip}>
                    Copy
                </Text>
            )}
        </>
    )
}

查伊姆·弗里德曼（Chayim Friedman）

这个问题实际上由两个部分组成：

如何在js中获取当前URL？

const url = location.href;

如何使用js将文本复制到剪贴板？：

navigator.clipboard.writeText(url);

最后：

export function Copy() {
    const [copySuccess, setCopySuccess] = useState("")
    const textAreaRef = useRef(null)

    async function copyToClip() {
        await navigator.clipboard.writeText(location.href);
        setCopySuccess("Copied");
    }

    return (
        <>
            <Text onClick={copyToClip}>
                Copy
            </Text>
        </>
    )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。