From 6643eae4336ff765b40e14797bb298f0701ad9e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 31 Mar 2025 15:04:16 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=99ActionIcon=E5=A2=9E=E5=8A=A0Ref?=
 =?UTF-8?q?=E8=BD=AC=E5=8F=91=E4=BB=A5=E6=96=B9=E4=BE=BF=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?DOM=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ActionIcon.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
index 076fad8..60566a8 100644
--- a/src/components/ActionIcon.tsx
+++ b/src/components/ActionIcon.tsx
@@ -1,15 +1,16 @@
 import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
 import cx from 'clsx';
-import { MouseEvent, MouseEventHandler, useCallback } from 'react';
+import { MouseEvent, MouseEventHandler, RefObject, useCallback } from 'react';
 import styles from './ActionIcon.module.css';
 
 type ActionIconProps = {
   icon: IconProps['icon'];
   onClick?: MouseEventHandler<HTMLButtonElement>;
   extendClassName?: HTMLButtonElement['className'];
+  ref: RefObject<HTMLButtonElement>;
 };
 
-export function ActionIcon({ icon, onClick, extendClassName }: ActionIconProps) {
+export function ActionIcon({ icon, onClick, extendClassName, ref }: ActionIconProps) {
   const handleClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
       onClick?.(event);
@@ -18,7 +19,11 @@ export function ActionIcon({ icon, onClick, extendClassName }: ActionIconProps)
   );
 
   return (
-    <button type="button" onClick={handleClick} className={cx(styles.action_icon, extendClassName)}>
+    <button
+      type="button"
+      onClick={handleClick}
+      className={cx(styles.action_icon, extendClassName)}
+      ref={ref}>
       <Icon icon={icon} className={styles.icon} />
     </button>
   );