From da807343d88ee557a96ef530cdfaed33db808ebb Mon Sep 17 00:00:00 2001 From: lusoftware Date: Fri, 8 Nov 2024 14:09:34 +0800 Subject: [PATCH] feat: add ts type for input events --- packages/bui-core/src/Input/Input.tsx | 8 ++++---- packages/bui-core/src/Input/Input.types.ts | 6 +++--- packages/bui-core/src/Input/index.md | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/bui-core/src/Input/Input.tsx b/packages/bui-core/src/Input/Input.tsx index b2d89f2d..24f4505c 100644 --- a/packages/bui-core/src/Input/Input.tsx +++ b/packages/bui-core/src/Input/Input.tsx @@ -35,13 +35,13 @@ const Input = forwardRef((props, ref) => { }); const [hasFocus, setHasFocus] = useState(false); - const handleFocus = (e) => { + const handleFocus = (e: React.FocusEvent) => { setHasFocus(true); onFocus?.(e); inputProps?.onFocus?.(e); }; - const handleBlur = (e) => { + const handleBlur = (e: React.FocusEvent) => { // 解决H5/小程序清除按钮先失焦隐藏不到的问题 setTimeout(() => { setHasFocus(false); @@ -50,7 +50,7 @@ const Input = forwardRef((props, ref) => { inputProps?.onBlur?.(e); }; - const handleChange = (e) => { + const handleChange = (e: React.ChangeEvent) => { // 小程序中input有onChange事件,其他类型一般只有onInput事件 if (isMini) return; triggerChange(e, e.target.value); @@ -65,7 +65,7 @@ const Input = forwardRef((props, ref) => { inputProps?.onInput?.(e); }; - const handleClear = (e) => { + const handleClear = (e: React.MouseEvent) => { triggerChange(e, ''); onClear?.(e); }; diff --git a/packages/bui-core/src/Input/Input.types.ts b/packages/bui-core/src/Input/Input.types.ts index 3c9e5e8d..ea1aa678 100644 --- 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) => void; /** * 输入框内容变化时的回调 */ @@ -68,11 +68,11 @@ export type InputProps< /** * 聚焦时的回调 */ - onFocus?: (e: React.SyntheticEvent) => void; + onFocus?: (e: React.FocusEvent) => void; /** * 失焦时的回调 */ - onBlur?: (e: React.SyntheticEvent) => void; + onBlur?: (e: React.FocusEvent) => void; }; defaultComponent: D; diff --git a/packages/bui-core/src/Input/index.md b/packages/bui-core/src/Input/index.md index 166c2c48..7f3f597c 100644 --- 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) => void | - | | onChange | 输入框内容变化时的回调 | (e: React.ChangeEvent,data: {value:string}) => void | - | -| onFocus | 聚焦时的回调 | (e: React.SyntheticEvent) => void | - | -| onBlur | 失焦时的回调 | (e: React.SyntheticEvent) => void | - | +| onFocus | 聚焦时的回调 | (e: React.FocusEvent) => void | - | +| onBlur | 失焦时的回调 | (e: React.FocusEvent) => void | - |