在react.js中复制到剪贴板时出现问题

const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText('要复制的文本');
    console.log('复制成功');
  } catch (error) {
    console.error('复制失败', error);
  }
};

npm install clipboard --save

import ClipboardJS from 'clipboard';

const MyComponent = () => {
  const copyButtonRef = useRef(null);

  useEffect(() => {
    const clipboard = new ClipboardJS(copyButtonRef.current);

    clipboard.on('success', () => {
      console.log('复制成功');
    });

    clipboard.on('error', () => {
      console.error('复制失败');
    });

    return () => {
      clipboard.destroy();
    };
  }, []);

  return (
    <button ref={copyButtonRef} data-clipboard-text="要复制的文本">
      复制到剪贴板
    </button>
  );
};