创立一个CopyText组件,增加a标签点击时把传入的text值复制到粘贴板,并设置Copy的状态:
CopyText.tsx
import { Space } from 'antd';import React, { useCallback, useState } from 'react';export interface ICopyTextProps { text: string;}export const CopyText: React.FC<ICopyTextProps> = (props) => { const text = props.text; const [isCopied, setIsCopied] = useState(false); const handleClick = useCallback( () => { const input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); input.setAttribute('value', text); document.body.appendChild(input); input.setSelectionRange(0, 9999); input.select(); document.execCommand('copy'); document.body.removeChild(input); setIsCopied(true); }, [text]); return ( <Space> <a style={{'wordBreak': 'keep-all'}} onClick={ handleClick } > {isCopied? 'Copied' : 'Copy'} </a> </Space> );};
创立一个input元素把传入的text放入input中,最初input.setSelectionRange(0, 9999); document.execCommand('copy')进行复制。
应用
例如在antd Table的render中:
render: (d) => { return <div>{d.address} <CompCopyText text={ d.address } /></div>;},