fix(Button): repair click state invalid

src/button/Button.tsx

@@ -1,17 +1,18 @@
-import React, { forwardRef } from 'react';
+import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import TLoading from '../loading';
-import useConfig from '../hooks/useConfig';
 import parseTNode from '../_util/parseTNode';
 import { TdButtonProps } from './type';
 import { buttonDefaultProps } from './defaultProps';
+import { usePrefixClass } from '../hooks/useClass';
 import useDefaultProps from '../hooks/useDefaultProps';
+import useHover from '../hooks/useHover';
 
 export interface ButtonProps
   extends TdButtonProps,
     Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'content' | 'children'> {}
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((originProps, ref) => {
+const Button: React.FC<ButtonProps> = (originProps) => {
   const props = useDefaultProps(originProps, buttonDefaultProps);
   const {
     className,
@@ -32,40 +33,42 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((originProps, ref) =>
     onClick,
     loadingProps,
   } = props;
-  const { classPrefix } = useConfig();
-
+  const buttonClass = usePrefixClass('button');
   const childNode = content || children;
 
+  const hoverDisabled = useMemo(() => disabled || loading, [disabled, loading]);
+  const ref = useHover({ className: `${buttonClass}--hover`, disabled: hoverDisabled });
+
   return (
     <button
       ref={ref}
       type={type}
       className={classnames(
         [
-          `${classPrefix}-button`,
-          `${classPrefix}-button--size-${size}`,
-          `${classPrefix}-button--${variant}`,
-          `${classPrefix}-button--${theme}`,
-          `${classPrefix}-button--${shape}`,
+          `${buttonClass}`,
+          `${buttonClass}--size-${size}`,
+          `${buttonClass}--${variant}`,
+          `${buttonClass}--${theme}`,
+          `${buttonClass}--${shape}`,
           className,
         ],
         {
-          [`${classPrefix}-button--ghost`]: ghost,
-          [`${classPrefix}-button--loading`]: loading,
-          [`${classPrefix}-button--disabled`]: disabled,
-          [`${classPrefix}-button--block`]: block,
+          [`${buttonClass}--ghost`]: ghost,
+          [`${buttonClass}--loading`]: loading,
+          [`${buttonClass}--disabled`]: disabled,
+          [`${buttonClass}--block`]: block,
         },
       )}
       style={style}
       onClick={!loading && !disabled ? onClick : undefined}
       disabled={disabled || loading}
     >
       {loading ? <TLoading inheritColor {...loadingProps} /> : parseTNode(icon)}
-      {childNode && <span className={`${classPrefix}-button__content`}> {parseTNode(childNode)}</span>}
+      {childNode && <span className={`${buttonClass}__content`}> {parseTNode(childNode)}</span>}
       {parseTNode(suffix)}
     </button>
   );
-});
+};
 
 Button.displayName = 'Button';
 

src/fab/Fab.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { reconvertUnit } from '../_util/convertUnit';
 import Button from '../button';
 import { TdFabProps } from './type';
@@ -13,24 +13,26 @@ const Fab: React.FC<FabProps> = (originProps) => {
   const props = useDefaultProps(originProps, fabDefaultProps);
   const { buttonProps, icon = null, text, onClick } = props;
 
-  const fabButtonRef = useRef(null);
+  const fabClass = usePrefixClass('fab');
+
   const fabRef = useRef<HTMLDivElement>(null);
 
   const [fabButtonSize, setFabButtonSize] = useState({
     width: 0,
     height: 0,
   });
 
-  useEffect(() => {
-    if (fabButtonRef.current) {
-      const info = window.getComputedStyle(fabButtonRef.current);
+  useLayoutEffect(() => {
+    const button = document.querySelector(`.${fabClass}__button`);
+    if (button) {
+      const info = window.getComputedStyle(button);
 
       setFabButtonSize({
         width: +reconvertUnit(info.width),
         height: +reconvertUnit(info.height),
       });
     }
-  }, []);
+  }, [fabClass]);
 
   const [btnSwitchPos, setBtnSwitchPos] = useState({
     x: 16,
@@ -46,8 +48,6 @@ const Fab: React.FC<FabProps> = (originProps) => {
     endY: 0,
   };
 
-  const fabClass = usePrefixClass('fab');
-
   const onClickHandle = (e: React.MouseEvent<HTMLDivElement>) => {
     onClick({ e });
   };
@@ -178,7 +178,6 @@ const Fab: React.FC<FabProps> = (originProps) => {
       onTouchEnd={onTouchEnd}
     >
       <Button
-        ref={fabButtonRef}
         size="large"
         theme="primary"
         shape={props.text ? 'round' : 'circle'}