fix: Fixed input controlled value (#184)

* fix: fix input controlled value Signed-off-by: yazhou <[email protected]> * chore: update version Signed-off-by: yazhou <[email protected]> --------- Signed-off-by: yazhou <[email protected]>
kubesphere · Jan 18, 2024 · 44954c7 · 44954c7
1 parent d0c82e3
commit 44954c7
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/.changeset/strange-countries-scream.md b/.changeset/strange-countries-scream.md
@@ -0,0 +1,5 @@
+---
+'@kubed/components': patch
+---
+
+fix: Fixed input controlled value
diff --git a/packages/components/src/Input/Input.story.tsx b/packages/components/src/Input/Input.story.tsx
@@ -8,7 +8,36 @@ export default {
   component: Input,
 };
 
-export const Basic = () => <Input placeholder="please input some text" width={360} />;
+export const Basic = () => {
+  return <Input placeholder="please input some text" width={360} onChange={console.log} />;
+};
+
+export const Controlled = () => {
+  const [value, setValue] = React.useState<undefined | string>('');
+
+  return (
+    <div>
+      <Input
+        placeholder="please input some text"
+        width={360}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value.slice(0, 6));
+        }}
+      />
+      <p>
+        <button
+          type="button"
+          onClick={() => {
+            setValue(undefined);
+          }}
+        >
+          clean
+        </button>
+      </p>
+    </div>
+  );
+};
 
 const suffix = (
   <Tooltip content="点击选择容器镜像">

diff --git a/packages/components/src/Input/Input.tsx b/packages/components/src/Input/Input.tsx
@@ -109,7 +109,7 @@ export const Input = forwardRef<InputProps, 'input'>(
             disabled={disabled}
             readOnly={readOnly}
             {...rest}
-            value={fixControlledValue(selfValue)}
+            value={typeof value !== 'undefined' ? value : fixControlledValue(selfValue)}
             onChange={handleChange}
             onFocus={handleFocus}
             onBlur={handleBlur}