react如何实现复制粘贴

86 阅读1分钟

如何实现

废话不多说,直接上代码

const [copiedStates, setCopiedStates] = useState({});
const handleCopy = (text) => {
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard
                .writeText(text)
                .then(() => {
                    message.success('复制成功', 1.5);
                    setCopiedStates((prevStates) => ({
                        ...prevStates,
                        [text]: true,
                    }));
                    // 这里是给每一个复制按钮的一个状态
                    setTimeout(
                        () =>
                            setCopiedStates((prevStates) => ({
                                ...prevStates,
                                [text]: false,
                            })),
                        1500
                    );
                })
                .catch((err) => {
                    message.error('复制失败');
                });
        } else {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.style.position = 'fixed';
            document.body.appendChild(textarea);
            textarea.select();
            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    message.info('复制成功', 1.5);
                    setCopiedStates((prevStates) => ({
                        ...prevStates,
                        [text]: true,
                    }));
                    setTimeout(
                        () =>
                            setCopiedStates((prevStates) => ({
                                ...prevStates,
                                [text]: false,
                            })),
                        1500
                    );
                } else {
                    message.error('复制失败');
                }
            } catch (err) {
                message.error('复制失败');
            }
            document.body.removeChild(textarea);
        }
    };

完成