记录一下剪切板功能

import React, { useState, useRef } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Typography } from "antd";
import Input from "antd/lib/input/Input";
const { Paragraph } = Typography;

const App: React.FC = () => {
  const [editableStr, setEditableStr] = useState("This is an editable text.");
  const [foo, setFoo] = useState(123);
  const co = useRef(null);
  const copy = () => {
    console.log(co.current.dataset.value);
    const el = document.createElement("input");
    // 给input元素赋值需要复制的文本
    el.setAttribute("value", co.current.dataset.value);
    // 将input元素插入页面
    document.body.appendChild(el);
    // 选中input元素的文本
    el.select();
    // 复制内容到剪贴板
    document.execCommand("copy");
    // 删除input元素
    document.body.removeChild(el);
  };

  return (
    <>
      <div id="id" ref={co} data-value={foo}>
        {foo}
      </div>
      <Button onClick={copy}>dian</Button>
      <Input value={foo} onChange={(e) => setFoo(e.target.value)} />
      <Paragraph editable={{ onChange: setEditableStr }}>
        {editableStr}
      </Paragraph>
      <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
    </>
  );
};

export default App;

修改为hook

import React, { useState, useEffect } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Typography } from "antd";
import useCopy from "./useCopy";
const { Paragraph } = Typography;

const App: React.FC = () => {
  const [editableStr, setEditableStr] = useState("This is an editable text.");
  const [foo, setFoo] = useState(123);
  const [foo2, setFoo2] = useState(111);
  useEffect(() => {
    setFoo(Math.random());
    setFoo2(Math.random() * 200);
  }, []);

  return (
    <>
      <div style={{ fontSize: 20, color: "red" }}>{useCopy(foo)}</div>
      {useCopy(foo2)}
      {/* <Input value={foo} onChange={(e) => setFoo(e.target.value)} /> */}
      {/* <Input value={foo2} onChange={(e) => setFoo2(e.target.value)} /> */}

      <Paragraph editable={{ onChange: setEditableStr }}>
        {editableStr}
      </Paragraph>
      <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
    </>
  );
};

export default App;

useCopy

import { useRef, useState } from "react";
import { message } from "antd";
import { CopyOutlined, CheckOutlined } from "@ant-design/icons";
const useCopy = (foo) => {
  const ref = useRef(null);
  const [color, setColor] = useState("#1890ff");

  const copy = () => {
    const el = document.createElement("input");
    // 给input元素赋值需要复制的文本
    el.setAttribute("value", ref.current.dataset.value);
    // 将input元素插入页面
    document.body.appendChild(el);
    // 选中input元素的文本
    el.select();
    // 复制内容到剪贴板
    document.execCommand("copy");
    // 删除input元素
    document.body.removeChild(el);
    message.success("copy success");
    setColor("#128172");
    setTimeout(() => {
      setColor("#1890ff");
    }, 2000);
  };
  return (
    <>
      <div id="id" ref={ref} data-value={foo}>
        {foo}
        {color === "#1890ff" ? (
          <CopyOutlined onClick={copy} style={{ color: color }} />
        ) : (
          <CheckOutlined onClick={copy} style={{ color: color }} />
        )}
      </div>
    </>
  );
};

export default useCopy;