reactjs - 使用 ReactJS 将事件浏览器的 url 复制到剪贴板

Question

我正在尝试编写一个函数，以便在单击链接时可以将当前浏览器的网址复制到剪贴板。我仍在尝试理解这段代码，此时我不知道如何创建输入，将其值设置为当前文档的 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>
            )}
        </>
    )
}

Answer 1

这个问题实际上由两个组成:

1. How to get the current URL in js?

const url = location.href;

How to copy text to clipboard using 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>
        </>
    )
}