fix: input error状态重置失效问题修改；校验格式onBlur失效问题修改 (#567)

src/packages/input/demo.taro.tsx

@@ -163,7 +163,7 @@ const InputDemo = () => {
           label={translated.text}
           placeholder={translated.text}
           defaultValue={value}
-          change={(val) => {
+          onChange={(val) => {
             console.log('change value:', val)
             UpdateValue(val)
           }}

src/packages/input/demo.tsx

@@ -164,7 +164,7 @@ const InputDemo = () => {
           label={translated.text}
           placeholder={translated.text}
           defaultValue={value}
-          change={(val) => {
+          onChange={(val) => {
             console.log('change value:', val)
             UpdateValue(val)
           }}

src/packages/input/input.scss

@@ -55,18 +55,18 @@ textarea {
     border: 0;
     text-decoration: none;
   }
-  &-label {
-    width: 80px;
-    overflow: hidden;
-    text-align: left;
-    display: flex;
-    .label-string {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      color: $gray1;
-    }
-  }
+  //   &-label {
+  //     width: 80px;
+  //     overflow: hidden;
+  //     text-align: left;
+  //     display: flex;
+  //     .label-string {
+  //       overflow: hidden;
+  //       white-space: nowrap;
+  //       text-overflow: ellipsis;
+  //       color: $gray1;
+  //     }
+  //   }
   &__clear {
     width: 16px;
     height: 16px;

src/packages/input/input.taro.tsx

@@ -76,14 +76,6 @@ export interface InputProps extends BasicComponent {
   onClickLeftIcon?: (value: any) => void
   onClickRightIcon?: (value: any) => void
   onClick?: (value: any) => void
-  change?: (value: any, event: Event) => void
-  blur?: (value: any, event: Event) => void
-  focus?: (value: any, event: Event) => void
-  clear?: (value: any, event: Event) => void
-  clickInput?: (value: any) => void
-  clickLeftIcon?: (value: any) => void
-  clickRightIcon?: (value: any) => void
-  click?: (value: any) => void
 }
 
 const defaultProps = {
@@ -178,14 +170,6 @@ export const Input: FunctionComponent<
     onClickLeftIcon,
     onClickRightIcon,
     onClick,
-    change,
-    blur,
-    focus,
-    clear,
-    clickInput,
-    clickLeftIcon,
-    clickRightIcon,
-    click,
     iconClassPrefix,
     iconFontClassName,
     ...rest
@@ -207,7 +191,9 @@ export const Input: FunctionComponent<
     validateMessage: '', // 校验信息
   }
   useLayoutEffect(() => {
-    updateValue(getModelValue(), formatTrigger)
+    if (defaultValue) {
+      updateValue(getModelValue(), formatTrigger)
+    }
   })
   useEffect(() => {
     setClasses(inputClass)
@@ -238,11 +224,17 @@ export const Input: FunctionComponent<
     ]
       .filter(Boolean)
       .join(' ')
-  }, [disabled, required, error, border])
+  }, [disabled, required, error, border, slotButton, rightIcon, center])
+
+  // 样式状态重置
+  useEffect(() => {
+    setClasses(inputClass)
+  }, [disabled, required, error, border, slotButton, rightIcon, center])
 
   const updateValue = (
     value: any,
-    trigger: InputFormatTrigger = 'onChange'
+    trigger: InputFormatTrigger = 'onChange',
+    event?: any
   ) => {
     let val = value
 
@@ -269,16 +261,14 @@ export const Input: FunctionComponent<
     if (inputRef?.current?.value !== val) {
       inputRef.current.value = val
     }
-    // if (val !== defaultValue) {
     SetInputValue(val)
-    // }
+    onChange && onChange(val, event)
   }
 
   const handleFocus = (event: Event) => {
     const val: any = (event.target as any).value
     SetActive(true)
     onFocus && onFocus(val, event)
-    focus && focus(val, event)
   }
 
   const handleInput = (event: Event) => {
@@ -287,9 +277,7 @@ export const Input: FunctionComponent<
     if (maxlength && val.length > Number(maxlength)) {
       val = val.slice(0, Number(maxlength))
     }
-    updateValue(val)
-    onChange && onChange(val, event)
-    change && change(val, event)
+    updateValue(val, 'onChange', event)
   }
 
   const handleBlur = (event: Event) => {
@@ -302,21 +290,17 @@ export const Input: FunctionComponent<
     }
     updateValue(getModelValue(), 'onBlur')
     onBlur && onBlur(val, event)
-    blur && blur(val, event)
   }
 
   const handleClickInput = (event: MouseEvent) => {
     onClickInput && onClickInput(event)
-    clickInput && clickInput(event)
   }
   const handleClickLeftIcon = (event: MouseEvent) => {
     onClickLeftIcon && onClickLeftIcon(event)
-    clickLeftIcon && clickLeftIcon(event)
   }
 
   const handleClickRightIcon = (event: MouseEvent) => {
     onClickRightIcon && onClickRightIcon(event)
-    clickRightIcon && clickRightIcon(event)
   }
 
   const resetValidation = () => {
@@ -339,7 +323,6 @@ export const Input: FunctionComponent<
   const handleClear = (event: Event) => {
     updateValue('')
     onClear && onClear('', event)
-    clear && clear('', event)
   }
 
   return (
@@ -348,7 +331,6 @@ export const Input: FunctionComponent<
       style={style}
       onClick={(e) => {
         onClick && onClick(e)
-        click && click(e)
       }}
     >
       {slotInput ? (

src/packages/input/input.tsx

@@ -67,14 +67,6 @@ export interface InputProps extends BasicComponent {
   slotButton?: React.ReactNode
   slotInput?: React.ReactNode
   formatter: (value: string) => void
-  change?: (value: any, event: Event) => void
-  blur?: (value: any, event: Event) => void
-  focus?: (value: any, event: Event) => void
-  clear?: (value: any, event: Event) => void
-  clickInput?: (value: any) => void
-  clickLeftIcon?: (value: any) => void
-  clickRightIcon?: (value: any) => void
-  click?: (value: any) => void
   onChange?: (value: any, event: Event) => void
   onBlur?: (value: any, event: Event) => void
   onFocus?: (value: any, event: Event) => void
@@ -178,14 +170,6 @@ export const Input: FunctionComponent<
     onClickLeftIcon,
     onClickRightIcon,
     onClick,
-    change,
-    blur,
-    focus,
-    clear,
-    clickInput,
-    clickLeftIcon,
-    clickRightIcon,
-    click,
     iconClassPrefix,
     iconFontClassName,
     ...rest
@@ -207,7 +191,9 @@ export const Input: FunctionComponent<
     validateMessage: '', // 校验信息
   }
   useLayoutEffect(() => {
-    updateValue(getModelValue(), formatTrigger)
+    if (defaultValue) {
+      updateValue(getModelValue(), formatTrigger)
+    }
   })
   useEffect(() => {
     setClasses(inputClass)
@@ -224,7 +210,6 @@ export const Input: FunctionComponent<
   useImperativeHandle(ref, () => {
     return inputRef.current
   })
-
   const inputClass = useCallback(() => {
     const prefixCls = 'nut-input'
     return [
@@ -238,11 +223,17 @@ export const Input: FunctionComponent<
     ]
       .filter(Boolean)
       .join(' ')
-  }, [disabled, required, error, border])
+  }, [disabled, required, error, border, slotButton, rightIcon, center])
+
+  // 样式状态重置
+  useEffect(() => {
+    setClasses(inputClass)
+  }, [disabled, required, error, border, slotButton, rightIcon, center])
 
   const updateValue = (
     value: any,
-    trigger: InputFormatTrigger = 'onChange'
+    trigger: InputFormatTrigger = 'onChange',
+    event?: any
   ) => {
     let val = value
 
@@ -269,16 +260,14 @@ export const Input: FunctionComponent<
     if (inputRef?.current?.value !== val) {
       inputRef.current.value = val
     }
-    // if (val !== defaultValue) {
     SetInputValue(val)
-    // }
+    onChange && onChange(val, event)
   }
 
   const handleFocus = (event: Event) => {
     const val: any = (event.target as any).value
     SetActive(true)
     onFocus && onFocus(val, event)
-    focus && focus(val, event)
   }
 
   const handleInput = (event: Event) => {
@@ -287,9 +276,7 @@ export const Input: FunctionComponent<
     if (maxlength && val.length > Number(maxlength)) {
       val = val.slice(0, Number(maxlength))
     }
-    updateValue(val)
-    onChange && onChange(val, event)
-    change && change(val, event)
+    updateValue(val, 'onChange', event)
   }
 
   const handleBlur = (event: Event) => {
@@ -302,21 +289,17 @@ export const Input: FunctionComponent<
     }
     updateValue(getModelValue(), 'onBlur')
     onBlur && onBlur(val, event)
-    blur && blur(val, event)
   }
 
   const handleClickInput = (event: MouseEvent) => {
     onClickInput && onClickInput(event)
-    clickInput && clickInput(event)
   }
   const handleClickLeftIcon = (event: MouseEvent) => {
     onClickLeftIcon && onClickLeftIcon(event)
-    clickLeftIcon && clickLeftIcon(event)
   }
 
   const handleClickRightIcon = (event: MouseEvent) => {
     onClickRightIcon && onClickRightIcon(event)
-    clickRightIcon && clickRightIcon(event)
   }
 
   const resetValidation = () => {
@@ -339,7 +322,6 @@ export const Input: FunctionComponent<
   const handleClear = (event: Event) => {
     updateValue('')
     onClear && onClear('', event)
-    clear && clear('', event)
   }
 
   return (
@@ -349,7 +331,6 @@ export const Input: FunctionComponent<
       {...rest}
       onClick={(e) => {
         onClick && onClick(e)
-        click && click(e)
       }}
     >
       {slotInput ? (
@@ -492,7 +473,6 @@ export const Input: FunctionComponent<
             {slotButton ? (
               <div className="nut-input-button">{slotButton}</div>
             ) : null}
-
             {showWordLimit && maxlength ? (
               <div className="nut-input-word-limit">
                 <span className="nut-input-word-num">