在 Web 应用中，复制文本到剪贴板是一个常见但有时棘手的功能。它涉及 DOM 操作和浏览器 API，这在 React 的声明式编程模型中可能显得不太自然。useCopyToClipboard 钩子提供了一种优雅的方式来封装这个功能，使其易于在 React 组件中使用。这个自定义钩子不仅简化了复制操作，还提供了复制状态的反馈。以下是如何实现和使用这个自定义钩子：
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}>Click to copy</button>
<span>{copied && 'Copied!'}</span>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<TextCopy />
);
这个技巧的关键点包括：
使用一个辅助函数 copyToClipboard来处理实际的复制操作。使用 useState来跟踪复制状态。使用 useCallback来优化复制函数，避免不必要的重渲染。使用 useEffect来重置复制状态，当文本变化时。
使用这个钩子时，需要注意以下几点：
复制操作可能受到浏览器安全策略的限制，通常需要用户交互（如点击）触发。 这个实现使用了 document.execCommand('copy')，它在某些现代浏览器中已被弃用，但仍广泛支持。复制状态（ copied）会在文本变化时自动重置。
扩展应用：
