使用ReactJS复制到剪贴板

问题描述

我正在调用API来获取对象的数据。对象属性如下：

obj:{
   name: "item",index:1,amount :20,}

我想要的是简单地将此对象的属性（名称，索引，数量）复制到剪贴板。我该如何在React和javascript中实现呢？预先感谢。

解决方法

您可以使用Clipboard API和writeText功能。

writeText接受一个要写入剪贴板的字符串。在这里，我使用JSON.stringify将props对象转换为string。

function App() {
  return (
    <div>
      <p>Click button below and check contents of your clipboard</p>
      <ClipboardButton index={1} name="item" amount={20} />
    </div>
  );
}

function ClipboardButton(props) {
  function handleClick() {
    navigator.clipboard.writeText(JSON.stringify(props));
  }

  return <button onClick={handleClick}>Copy to clipboard</button>;
}

ReactDOM.render(<App />,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

,

首先，让我们创建一个使用Vanilla JS剪切剪贴板的函数：

const copyToClipboard = (content) => {
    const el = document.createElement("textarea");
    el.value = content;
    el.setAttribute("readonly","");
    el.style.position = "absolute";
    el.style.left = "-9999px";
    document.body.appendChild(el);
    el.select();
    el.setSelectionRange(0,99999);
    document.execCommand("copy");
    document.body.removeChild(el);
    alert("Copied the text: " + content);
};

然后让我们创建如下的handleClick函数：

const handleClick = () => {
    let exampleData = {
      name: "item",index: 1,amount: 20
    };

    exampleData = JSON.stringify(exampleData);
    copyToClipboard(exampleData);
};

然后让一个按钮复制剪贴板并将我们的handleClick方法添加为onClick道具；

<button onClick={handleClick}>Copy the data</button>

所以你去:) Working example - codesandbox.io

检查这些链接以更好地理解；

How can I copy text to clipboard with JavaScript?

How TO - Copy Text to Clipboard - W3School

JSON.stringify() - W3School