From 9f8d29f195cef10fc1314ce8d834c2e7b0b789f1 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Sun, 23 Apr 2023 16:10:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9input=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.tsx                  |  4 ++--
 src/components/input/index.tsx | 31 +++++++++++++++----------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/_test.tsx b/src/_test.tsx
index a10b147..a83a80a 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -9,7 +9,7 @@ import Input from "./components/input";
 function App() {
   const [visible, setVisible] = useState(false);
   const [ev, setEv] = useState(false);
-  const [value, setValue] = useState(10);
+  const [value, setValue] = useState<string | number>();
 
   const handleClick = (e: unknown) => {
     setValue(e?.target.value);
@@ -19,7 +19,7 @@ function App() {
   return (
     <div>
       <Input
-        defaultValue={"undefinedssss"}
+        defaultValue={"11111111111111"}
         maxLength={10}
         value={value}
         onChange={handleClick}
diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
index 57ee9fe..4631fa6 100644
--- a/src/components/input/index.tsx
+++ b/src/components/input/index.tsx
@@ -6,35 +6,34 @@ interface IProps extends React.HTMLProps<HTMLInputElement> {
   style?: React.CSSProperties;
   value: string | number | undefined;
   maxLength?: number | undefined;
-  defaultValue?: string | undefined;
+  defaultValue?: Readonly<string> | number | undefined;
 }
 
 const Input = (props: IProps) => {
-  const { value, defaultValue, maxLength, className, style } = props;
+  const { value, maxLength, className, style, defaultValue } = props;
   const [inputLength, setInputLength] = useState(0);
 
   useEffect(() => {
-    if (value === "string") {
+    if (typeof value === "string") {
       let inputValues = value?.split("").length;
       setInputLength(inputValues);
+    } else if (typeof value === "number") {
+      let inputValueNumber = value.toString().split("").length;
+      setInputLength(inputValueNumber);
     } else {
       setInputLength(0);
     }
   }, [value]);
 
   useEffect(() => {
-    if (defaultValue) {
-      if (typeof defaultValue === "number") {
-        let defaultValueArrayLength = defaultValue
-          ?.toString()
-          ?.split("")?.length;
-        setInputLength(defaultValueArrayLength);
-      } else if (typeof defaultValue === "string") {
-        let defaultValues = defaultValue.split("").length;
-        setInputLength(defaultValues);
-      } else {
-        setInputLength(0);
-      }
+    if (typeof defaultValue === "string") {
+      const defaultValueStringLength = defaultValue?.split("").length;
+      setInputLength(defaultValueStringLength);
+    } else if (typeof defaultValue === "number") {
+      const defaultValueNumberLength = defaultValue.toString().split("").length;
+      setInputLength(defaultValueNumberLength);
+    } else {
+      setInputLength(0);
     }
   }, []);
 
@@ -44,7 +43,7 @@ const Input = (props: IProps) => {
         className={`${inputLength <= 10 ? "inputBox" : "action"} ${className}`}
         style={{ ...style }}
       >
-        <input {...props} />
+        <input type="text" defaultValue={defaultValue} {...props} />
         <span className="numberLimit">{`${inputLength}/${
           maxLength && maxLength
         }`}</span>