Javascript 使用useRef钩子将副本复制到剪贴板

我正在尝试用useRef钩子处理复制到剪贴板的操作。如果没有任何附加库，我如何实现它？这是我的代码，但它抛出一个错误myRef.current.select不是函数

import React, { useRef } from "react";

const Element = () => {
  const myRef = useRef();

  const copyToClipboard = () => {
    myRef.current.select();
    document.execCommand("copy");
  };

  return (
    <div>
      <span onClick={copyToClipboard} ref={myRef}>
        Text to be copied
      </span>
    </div>
  );
};

export default Element;

看一看，我刚刚根据您的用例对其进行了调整

  const copyToClipboard = () => {
    const range = document.createRange();
    range.selectNode(myRef.current);
    window.getSelection().addRange(range);

    try {
      // Now that we've selected the anchor text, execute the copy command
      const successful = document.execCommand('copy');
      const msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy email command was ' + msg);
    } catch(err) {
      console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
  };

---

再见，我找到了一个解决方案，但我必须使用输入而不是跨度。我没有使用userefhook，只是使用了一个变量，让myInput=null；然后在输入ref上我写了ref={ref=>myInput=ref}。这样，您的copyToClipboard就可以工作了

守则：

function App() {
  let myInput = null;
  const copyToClipboard = () => {
    myInput.select();
    document.execCommand("copy");
    alert("Copied the text: " + myInput.value);
  };

  return (
    <div>
      <input readOnly value="Text to copy" onClick={copyToClipboard} ref={(ref) => myInput = ref} />
    </div>
  );
}

---

代码沙盒示例。

运行以下代码段

有一个单独的CopyToClipElement组件，该组件带有React挂钩，用于处理给定文本属性的副本。在渲染中使用此组件。 const CopyToClipElement={text}=>{ const myRef=React.useRefnull； const[data，setData]=React.useStatetext； React.useffect=>setDatatext[text]； React.useffect=>{ 如果myRef.current&数据{ myRef.current.select； 文件副本； setDatanull； } }，[数据，myRef.current]； 返回{data&&{data}； }; 常量元素==>{ const[copyText，setCopyText]=React.useState； 常量数据=[要复制的文本，复制foo]； 回来 {data.maptext=> setCopyTexttext} > {text} } ; }; const domContainer=document.querySelector'app'； ReactDOM.render，domContainer；

---

const myRef=useRefnull；不幸的是，这并没有起作用。我已经注意到，如果我改为，那么它工作得很好。有没有办法从span而不是从textarea复制文本？它复制内部输入only@BaruchMashasha在回答之前我没有读过你的评论，但事实上你是对的。正如我看到的，它只对输入有效。你知道为什么吗？@DmitryDev是的，它对span不起作用，但有办法实现它，我用另一种解决方案发布了我的答案。我相信它不起作用，因为我试图复制的文本在元素内部，而不是元素内部。所以唯一的解决办法就是换成，至少我没有找到任何其他解决办法…@DmitryDev你试过我的解决办法吗？刚刚在JSFIDLE中测试过，它可以工作。是的，它可以工作，因为某种原因，它第一次没有工作。这绝对是另一种方式。我相信我用更少的代码找到了一个更简单的解决方案。请看我对乔瓦尼回答的回应。你实际上给了我一个非常好的主意。我还没有意识到我可以对输入使用只读属性。因此，我改为并添加了readOnly。现在，您可以使用css将其样式设置为一个span元素或任何您想要的元素，而实际上不需要更改代码的结构。所以我想这也是另一种方法。格拉齐！是的，你当然能做到。很高兴帮助你。Prego：