fix(checkbox): enable user to click content (#328)

Tencent · Nov 28, 2022 · c8ed9af · c8ed9af
1 parent a964c99
commit c8ed9af
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx
@@ -44,7 +44,7 @@ const Checkbox = forwardRef((_props: CheckBoxProps, ref: Ref<HTMLInputElement>)
     maxLabelRow = 3,
     maxContentRow = 5,
     icon,
-    contentDisabled,
+    contentDisabled = false,
     // borderless = false,
   } = props;
   const [internalChecked, setInternalChecked] = useDefault(checked, defaultChecked, onChange);
@@ -86,6 +86,8 @@ const Checkbox = forwardRef((_props: CheckBoxProps, ref: Ref<HTMLInputElement>)
     if (contentDisabled) {
       e.preventDefault();
     }
+
+    setInternalChecked(!internalChecked, { e })
   };
   return (
     <>
@@ -102,17 +104,15 @@ const Checkbox = forwardRef((_props: CheckBoxProps, ref: Ref<HTMLInputElement>)
               disabled={disabled}
               checked={internalChecked}
               onClick={(e) => e.stopPropagation()}
-              onChange={(e) => {
-                setInternalChecked(e.currentTarget.checked, { e });
-              }}
+              onChange={(e) => setInternalChecked(e.currentTarget.checked, { e })}
             />
             {renderIcon()}
           </span>}
-          <span className={ `${classPrefix}-checkbox__label ${classPrefix}-checkbox__label-left`} >
+          <span className={ `${classPrefix}-checkbox__label ${classPrefix}-checkbox__label-left`} onClick={handleClick}>
             <span style={labelStyle}>
               {label}
             </span>
-            <span className={`${classPrefix}-checkbox__description`} style={getLimitRowStyle(maxContentRow)} onClick={handleClick}>
+            <span className={`${classPrefix}-checkbox__description`} style={getLimitRowStyle(maxContentRow)}>
               {children || content}
             </span>
           </span>
@@ -128,9 +128,7 @@ const Checkbox = forwardRef((_props: CheckBoxProps, ref: Ref<HTMLInputElement>)
               disabled={disabled}
               checked={internalChecked}
               onClick={(e) => e.stopPropagation()}
-              onChange={(e) => {
-                setInternalChecked(e.currentTarget.checked, { e });
-              }}
+              onChange={(e) => setInternalChecked(e.currentTarget.checked, { e })}
             />
             {renderIcon()}
           </span>}

diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts
@@ -5,7 +5,7 @@
  * */
 
 import { TNode } from '../common';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, MouseEvent } from 'react';
 
 export interface TdCheckboxProps {
   /**
@@ -84,7 +84,7 @@ export interface TdCheckboxProps {
   /**
    * 值变化时触发
    */
-  onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLInputElement> }) => void;
+  onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLDivElement> | MouseEvent<HTMLDivElement> }) => void;
 }
 
 export interface TdCheckboxGroupProps {