feat: add ts type for input events

alibaba · Nov 8, 2024 · da80734 · da80734
1 parent 7a68cee
commit da80734
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/packages/bui-core/src/Input/Input.tsx b/packages/bui-core/src/Input/Input.tsx
@@ -35,13 +35,13 @@ const Input = forwardRef<HTMLDivElement, InputProps>((props, ref) => {
   });
   const [hasFocus, setHasFocus] = useState(false);
 
-  const handleFocus = (e) => {
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     setHasFocus(true);
     onFocus?.(e);
     inputProps?.onFocus?.(e);
   };
 
-  const handleBlur = (e) => {
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     // 解决H5/小程序清除按钮先失焦隐藏不到的问题
     setTimeout(() => {
       setHasFocus(false);
@@ -50,7 +50,7 @@ const Input = forwardRef<HTMLDivElement, InputProps>((props, ref) => {
     inputProps?.onBlur?.(e);
   };
 
-  const handleChange = (e) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     // 小程序中input有onChange事件，其他类型一般只有onInput事件
     if (isMini) return;
     triggerChange(e, e.target.value);
@@ -65,7 +65,7 @@ const Input = forwardRef<HTMLDivElement, InputProps>((props, ref) => {
     inputProps?.onInput?.(e);
   };
 
-  const handleClear = (e) => {
+  const handleClear = (e: React.MouseEvent<HTMLDivElement>) => {
     triggerChange(e, '');
     onClear?.(e);
   };

diff --git a/packages/bui-core/src/Input/Input.types.ts b/packages/bui-core/src/Input/Input.types.ts
@@ -55,7 +55,7 @@ export type InputProps<
       /**
        * 点击清除图标的回调，非受控状态也会清除输入框内容
        */
-      onClear?: (e: React.SyntheticEvent) => void;
+      onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
       /**
        * 输入框内容变化时的回调
        */
@@ -68,11 +68,11 @@ export type InputProps<
       /**
        * 聚焦时的回调
        */
-      onFocus?: (e: React.SyntheticEvent) => void;
+      onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
       /**
        * 失焦时的回调
        */
-      onBlur?: (e: React.SyntheticEvent) => void;
+      onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     };
 
     defaultComponent: D;

diff --git a/packages/bui-core/src/Input/index.md b/packages/bui-core/src/Input/index.md
@@ -231,7 +231,7 @@ export default () => {
 | endIcon      | 带图标的 input，设置后置图标，若 clearable=true，则两个图标都会展示         | ReactNode                                                              | -      |
 | placeholder  | 占位内容                                                                    | string                                                                 | -      |
 | disabled     | 是否禁用                                                                    | boolean                                                                | false  |
-| onClear      | 点击清除图标的回调，非受控状态也会清除输入框内容                            | (e: React.SyntheticEvent) => void                                      | -      |
+| onClear      | 点击清除图标的回调，非受控状态也会清除输入框内容                            | (e: React.MouseEvent<HTMLDivElement\>) => void                         | -      |
 | onChange     | 输入框内容变化时的回调                                                      | (e: React.ChangeEvent<HTMLInputElement\>,data: {value:string}) => void | -      |
-| onFocus      | 聚焦时的回调                                                                | (e: React.SyntheticEvent) => void                                      | -      |
-| onBlur       | 失焦时的回调                                                                | (e: React.SyntheticEvent) => void                                      | -      |
+| onFocus      | 聚焦时的回调                                                                | (e: React.FocusEvent<HTMLInputElement\>) => void                       | -      |
+| onBlur       | 失焦时的回调                                                                | (e: React.FocusEvent<HTMLInputElement\>) => void                       | -      |