基于react-hooks、实现复制内容到粘贴板上,CopyToClip

背景:业务上对于一些长文本,或者特定的文案需要给予一键复制的功能

实现效果:

 

 实现原理

import { Button, Popover } from 'antd'
import copy from 'copy-to-clipboard'
import React, { useMemo } from 'react'

// 复制组件
import Message from '@/components/antd/Message'
interface CopyToClipType {
  text: any // 展示的内容  通常为订单号等
  copyText?: string // 复制文案   默认复制
  successCoptText?: string // 复制成功文案
  children?: JSX.Element | string
}

const CopyToClip: React.FC<CopyToClipType> = (properties) => {
  const {
    text,
    copyText = '复制',
    successCoptText = '已成功复制到粘贴板!',
    children,
    ...setting
  } = properties

  const Content = useMemo(() => {
    return (
      <Button
        type="link"
        onClick={(e) =
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是使用React Hooks对Axios进行二次封装的示例代码: ```javascript import { useState, useEffect } from 'react'; import axios from 'axios'; const useAxios = (url, method, body = null, headers = null) => { const [response, setResponse] = useState(null); const [error, setError] = useState(null); useEffect(() => { axios({ method: method, url: url, data: body, headers: headers }) .then(res => { setResponse(res.data); }) .catch(err => { setError(err); }); }, [url, method, body, headers]); return { response, error }; }; export default useAxios; ``` 在这个示例中,我们使用了useState和useEffect两个React Hooks。useState用于在组件中存储状态,而useEffect用于在组件渲染时执行副作用操作。我们将Axios请求封装在useAxios自定义钩子中,并将url,method,body和headers作为参数传递。在useEffect中,我们使用Axios发送请求,并根据响应设置状态。最后,我们返回一个包含响应和错误的对象。 使用示例: ```javascript import useAxios from './useAxios'; const MyComponent = () => { const { response, error } = useAxios('https://jsonplaceholder.typicode.com/posts', 'get'); if (error) return <div>Error: {error.message}</div>; if (!response) return <div>Loading...</div>; return ( <ul> {response.map(post => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }; ``` 在这个示例中,我们使用useAxios钩子从https://jsonplaceholder.typicode.com/posts获取帖子列表。我们根据响应渲染帖子列表,如果出现错误,则显示错误消息,如果响应尚未返回,则显示加载消息。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值