时间戳

首页 > 解决方案 > 使用 ReactJS 复制到剪贴板

reactjs - 使用 ReactJS 复制到剪贴板

问题描述

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

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

我想要的是简单地将这个对象的属性（名称、索引、数量）复制到剪贴板。如何在 React 和 javascript 中实现这一点？提前致谢。

标签： reactjscopyclipboard

解决方案

您可以使用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>

推荐阅读