reactjs - 使用 ReactJS 复制到剪贴板

Question

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

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

我想要的只是将该对象的属性(名称、索引、金额)复制到剪贴板。我怎样才能在 React 和 javascript 中实现这一点？提前致谢。

Answer 1

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