feat: input 数据变化控制例子补充 (#364)

jdf2e · Oct 24, 2022 · 6b6a4e9 · 6b6a4e9
1 parent ee2a685
commit 6b6a4e9
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/src/packages/input/demo.taro.tsx b/src/packages/input/demo.taro.tsx
@@ -102,7 +102,7 @@ const InputDemo = () => {
       placeholder5: 'Input Align',
     },
   })
-  const [value1, UpdateValue1] = useState('')
+  const [value, UpdateValue] = useState('')
   const [state, setState] = useState({
     val1: '',
     text: '',
@@ -128,7 +128,7 @@ const InputDemo = () => {
     clear: '',
   })
 
-  const change = (value: string | number) => {
+  const change = (value: string | number, event: Event) => {
     console.log('change: ', value)
   }
   const focus = (value: string | number, event: Event) => {
@@ -161,13 +161,17 @@ const InputDemo = () => {
         <Input
           label={translated.text}
           placeholder={translated.text}
-          defaultValue={value1}
+          defaultValue={value}
+          change={(val) => {
+            console.log('change value:', val)
+            UpdateValue(val)
+          }}
         />
         <h2>{translated.title1}</h2>
         <Input
           label={translated.text}
           placeholder={translated.text}
-          defaultValue={value1}
+          defaultValue={state.val1}
         />
         <Input
           label={translated.password}

diff --git a/src/packages/input/demo.tsx b/src/packages/input/demo.tsx
@@ -103,7 +103,7 @@ const InputDemo = () => {
       placeholder5: 'Input Align',
     },
   })
-  const [value1, UpdateValue1] = useState('')
+  const [value, UpdateValue] = useState('')
   const [state, setState] = useState({
     val1: '',
     text: '',
@@ -129,7 +129,7 @@ const InputDemo = () => {
     clear: '',
   })
 
-  const change = (value: string | number) => {
+  const change = (value: string | number, event: Event) => {
     console.log('change: ', value)
   }
   const focus = (value: string | number, event: Event) => {
@@ -162,13 +162,17 @@ const InputDemo = () => {
         <Input
           label={translated.text}
           placeholder={translated.text}
-          defaultValue={value1}
+          defaultValue={value}
+          change={(val) => {
+            console.log('change value:', val)
+            UpdateValue(val)
+          }}
         />
         <h2>{translated.title1}</h2>
         <Input
           label={translated.text}
           placeholder={translated.text}
-          defaultValue={value1}
+          defaultValue={state.val1}
         />
         <Input
           label={translated.password}

diff --git a/src/packages/input/doc.en-US.md b/src/packages/input/doc.en-US.md
@@ -22,7 +22,9 @@ const App = () => {
     const [value, UpdateValue] = useState('')
   return (
     <>
-      <Input label="Text" defaultValue={value} placeholder="Text" />
+      <Input label="Text" defaultValue={value} placeholder="Text" change={(val) => {
+            UpdateValue(val)
+          }}/>
     </>
   );
 };
@@ -423,7 +425,7 @@ export default App;
 
 | Attribute         | Description                                   | Type           | Default  |
 | ------------ | -------------------------------------- | -------------- | ------- |
-| defaultValue | Input value, two-way binding                   | String         | -       |
+| defaultValue | Input value                   | String         | -       |
 | type         | Input type, support all native types and `textarea` `number` `digit` type    | String         | `text`  |
 | placeholder  | Placeholder when the input box is empty         | String         | -       |
 | label        | Left text                               | String         | -       |

diff --git a/src/packages/input/doc.md b/src/packages/input/doc.md
@@ -21,10 +21,12 @@ import  React, { useState } from "react";
 import { Input } from '@nutui/nutui-react';
 
 const App = () => {
-    const [value1, UpdateValue1] = useState('')
+    const [value, UpdateValue] = useState('')
   return (
     <>
-      <Input label="文本" defaultValue="{value1}"  placeholder="文本" />
+      <Input label="文本" defaultValue={value}  placeholder="文本" change={(val) => {
+            UpdateValue(val)
+          }}/>
     </>
   );
 };
@@ -365,8 +367,8 @@ const App = () => {
     const  [state, setState] = useState({
         event: '',
     })
-    const change = (value: string | number) => {
-        console.log('change: ', value)
+    const change = (value: string | number, event: Event) => {
+        console.log('change: ', value, event)
     }
     const focus = (value: string | number, event: Event) => {
         console.log('focus:', value, event)
@@ -417,7 +419,7 @@ export default App;
 
 | 参数         | 说明                                   | 类型           | 默认值  |
 | ------------ | -------------------------------------- | -------------- | ------- |
-| defaultValue | 初始默认值，双向绑定                   | String         | -       |
+| defaultValue | 初始默认值                   | String         | -       |
 | type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `textarea` `number` `digit`      | String         | `text`  |
 | placeholder  | 输入框为空时占位符                           | String         | -       |
 | label        | 左侧文本                               | String         | -       |

diff --git a/src/packages/input/doc.zh-TW.md b/src/packages/input/doc.zh-TW.md
@@ -21,10 +21,12 @@ import  React, { useState } from "react";
 import { Input } from '@nutui/nutui-react';
 
 const App = () => {
-    const [value1, UpdateValue1] = useState('')
+    const [value, UpdateValue] = useState('')
   return (
     <>
-      <Input label="文本" defaultValue="{value1}"  placeholder="文本" />
+      <Input label="文本" defaultValue={value}  placeholder="文本" change={(val) => {
+            UpdateValue(val)
+          }}/>
     </>
   );
 };
@@ -365,8 +367,8 @@ const App = () => {
     const  [state, setState] = useState({
         event: '',
     })
-    const change = (value: string | number) => {
-        console.log('change: ', value)
+    const change = (value: string | number, event: Event) => {
+        console.log('change: ', value, event)
     }
     const focus = (value: string | number, event: Event) => {
         console.log('focus:', value, event)
@@ -417,7 +419,7 @@ export default App;
 
 | 参数         | 说明                                   | 类型           | 默认值  |
 | ------------ | -------------------------------------- | -------------- | ------- |
-| defaultValue | 初始默认值，双向绑定                   | String         | -       |
+| defaultValue | 初始默认值                   | String         | -       |
 | type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `textarea` `number` `digit`      | String         | `text`  |
 | placeholder  | 输入框为空时占位符                           | String         | -       |
 | label        | 左侧文本                               | String         | -       |