首页 > 其他分享 >使用react+copy-to-clipboard封装双击复制组件

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

时间:2024-11-10 20:19:07浏览次数:7  
标签:Copy const api react clipboard import copy 双击

前言:

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


首先:安装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

 

标签:Copy,const,api,react,clipboard,import,copy,双击
From: https://blog.csdn.net/gurenchang/article/details/143664740

相关文章

  • Redux的基本原理以及其如何在React中使用
    什么是Redux?它有什么用Redux是一个用于JavaScript应用的状态管理库,通常与React一起使用。它帮助开发者管理应用中各个组件之间的状态,使得状态的变化变得更加可预测和易于调试。注意:Redux也可以不和React组合使用的哦(通常一起使用)Redux基本原理所有的状态都以对象树......
  • ReactPress技术揭秘
    ReactPressGithub项目地址:https://github.com/fecommunity/reactpress欢迎Star。一、引言ReactPress是一个基于React构建的开源发布平台,它不仅可以帮助用户在支持React和MySQL数据库的服务器上快速搭建自己的博客或网站,还能作为一个功能强大的内容管理系统(CMS)使用。本......
  • Springboot 的Servlet Web 应用、响应式 Web 应用(Reactive)以及非 Web 应用(None)的特点
    基于Servlet的Web应用(ServletWeb)    特点         使用传统的ServletAPI和SpringMVC框架。         采用阻塞I/O模型,每个请求都会占用一个线程直到请求处理完毕。         适合处理同步请求-......
  • WINDOWS XP ReactOS 4.2 对象类型
    系列文章目录文章目录系列文章目录4.2对象类型OBJECT_TYPE_INITIALIZERExpInitializeTimerImplementation()ObpInsertEntryDirectory()ObInit()IopCreateObjectTypes()4.2对象类型对象是分类的,因而是有“类型(Type)”的,前面列举了许多常用的Windows对象类型。但是要列举......
  • 4.1 WINDOWS XP,ReactOS对象与对象目录----1
    系列文章目录文章目录系列文章目录4.1对象与对象目录OBJECT_HEADERObpLookupEntryDirectory()NtCreateTimer()4.1对象与对象目录“对象(Object)”这个词现在大家都已耳熟能详了,但是对象到底是什么呢?广义地说,对象就是“目标”,行为的目标,或者说行为的受体。所以,广......
  • react 组件应用
    文章目录react组件react中组件hook函数应用useMemo技术细节(useMemo钩子函数和useCallback钩子函数)小结(依赖性数组应用)react组件函数式组件实例及应用场景实例:以下是一个简单的函数式组件,用于显示一个欢迎消息。importReactfrom'react';con......
  • ReactPress 是什么?
    ReactPressGithub项目地址:https://github.com/fecommunity/reactpress欢迎Star。ReactPress是什么?ReactPress是使用React开发的开源发布平台,用户可以在支持React和MySQL数据库的服务器上架设属于自己的博客、网站。也可以把ReactPress当作一个内容管理系统(CMS)来使......
  • MECH E4320 Batch_Reactor_Ignition
    MECHE4320(Fall2024):Homework#4PleaseturninyourhomeworkbeforethedateandtimeindicatedinCourseworks.Pleaseshowandexplainyourworkclearlyandcompletelyinordertoearnfullcredit.Pleaseincludeallpartsofthehomeworkyouwantto......
  • 使用 React Native WebView 实现 App 与 Web 的通讯
    使用ReactNativeWebView实现App与Web的通讯在移动应用开发中,常常需要在应用中嵌入网页,并实现App与Web之间的通讯。ReactNative提供了一个强大的组件——react-native-webview,可以帮助我们实现这一功能。在这篇文章中,我们将介绍如何使用react-native-webview......
  • 移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Native + Vu
    书:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包括选择器、盒......