使用react+copy-to-clipboard封装双击复制组件

前言：

最近在公司研发后台系统，用户反馈在双击某些信息时希望可以进行复制的操作，多处使用进而封装为组件

首先：安装copy-to-clipboard

npm i --save copy-to-clipboard

其次：封装组件

import React, { memo, useCallback } from 'react';
import { notification } from "antd";
import copy from 'copy-to-clipboard';
 const [api, contextHolder] = notification.useNotification();
 const Copy = memo((props) => {
    const { txt, children } = props;
    const copyTxt = useCallback(() => {
        if (copy(txt)) {
            api.success({ message: '已复制' });
        } else {
            api.warning({ message: '复制失败' });
        }
    }, [txt])
    return <span  style={{cursor:'pointer'}} onDoubleClick={copyTxt}>
        {children}
    </span>
})


export default Copy

最后，使用：

import Copy from "../../Copy";
const UseCopy = () =>{
let name = "蓝宇逸尘"
return(
 <Copy txt={name}>
         {name}
 </Copy>
 )
}
export default UseCopy

 

原文地址：https://blog.csdn.net/gurenchang/article/details/143664740

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！