关于react-hooks:React-Hooks-实现复制文本到粘贴板组件

创立一个 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);
    }, );

    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>;
},