React useCopyToClipboard Hook
将给定的文本复制到剪贴板。
- 使用 copyToClipboard 代码片段将文本复制到剪贴板。
- 使用
useState()
钩子初始化copied
变量。 - 使用
useCallback()
钩子为copyToClipboard
方法创建回调函数。 - 使用
useEffect()
钩子在text
改变时重置copied
状态变量。 - 返回
copied
状态变量和copy
回调函数。
const useCopyToClipboard = text => {
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0
? document.getSelection().getRangeAt(0)
: false;
el.select();
const success = document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
return success;
};
const [copied, setCopied] = React.useState(false);
const copy = React.useCallback(() => {
if (!copied) setCopied(copyToClipboard(text));
}, [text]);
React.useEffect(() => () => setCopied(false), [text]);
return [copied, copy];
};
const TextCopy = props => {
const [copied, copy] = useCopyToClipboard('Lorem ipsum');
return (
<div>
<button onClick={copy}>点击复制</button>
<span>{copied && '已复制!'}</span>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<TextCopy />
);