update

Author: zhangfisher

docs/.vitepress/config.mts

@@ -98,7 +98,6 @@ export default defineConfig({
                   text: '表单', 
                   collapsed: true,
                   items:[
-                    { text:"关于",link:"/guide/form/form/about"},                    
                     { text:"创建",link:"/guide/form/form/create"},                      
                     { text:"useForm",link:"/guide/form/form/use-form"},                                      
                     { text:"提交表单",link:"/guide/form/form/submit"},                     

docs/demos/form/form/multiForm.tsx

@@ -28,26 +28,23 @@ const store = createStore({
 export default ()=>{
 
     const [ state ] = store.useReactive()
-      return (
-        <Layout direction="column">        
-            <div>   
-                    {state.orders.map((order,index)=>{
-                        const { Form,reset } = useForm(store,{entry:`orders.${index}`})
-                        return <Box key={index}>
-                                <Form>
-                                    <ColorBlock name="Order Total">{order.total}</ColorBlock>   
-                                    <Input label="Name" name="name" />
-                                    <Input label="Price"  name="price" type="number" />
-                                    <Input label="count"  name="count" type="number" />                                                                  
-                                    <Button onClick={()=>{}}>Submit</Button>
-                                    <Button onClick={()=>reset()}>Reset</Button>
-                                </Form>
-                            </Box>  
-                    })}                
-            </div>
-            <div>
+      return (<div>        
+            {state.orders.map((order,index)=>{
+                const { Form,reset } = useForm(store,{entry:`orders.${index}`})
+                return <Box key={index}>
+                        <Form>
+                            <ColorBlock name="Order Total">{order.total}</ColorBlock>   
+                            <Input label="Name" name="name" />
+                            <Input label="Price"  name="price" type="number" />
+                            <Input label="count"  name="count" type="number" />                                                                  
+                            <Button onClick={()=>{}}>Submit</Button>
+                            <Button onClick={()=>reset()}>Reset</Button>
+                        </Form>
+                    </Box>  
+            })}     
+            <Box>
                 <JsonView data={state}/>
-            </div>
-        </Layout>
+            </Box>
+        </div>
       )
 }

docs/guide/form/field/component.md

@@ -93,52 +93,7 @@ const { Form,Field } = useForm({
 
 因为`validate`属性是用于创建计算属性，所以可以使用`computed`、`watch`等方法来动态声明`validate`属性。
 
-
-- **简单的同步计算校验**
-
-```tsx
-<Field
-    validate={(value)=>{
-        return assert(value.length>3,"长度必须大于3")
-    }}
-    //...
-/>
-```
-
-- **简单的异步计算校验**
-
-```tsx
-<Field
-    validate={async (value)=>{
-        return assert(value.length>3,"长度必须大于3")
-    }}
-    //...    
-/>
-```
-
-- **异步计算校验**
-
-```tsx
-import { computed } from "@autostorejs/react"
-<Field
-    validate={computed(async (value)=>{
-        return assert(value.length>3,"长度必须大于3")
-    },[])}
-    // ...
-/>
-```
-
-- **监听校验**
-
-```tsx
-import { watch } from "@autostorejs/react"
-<Field
-    validate={watch(async ({path,value})=>{
-        return assert(value.length>3,"长度必须大于3")
-    },()=>{...})}
-    // ...
-/>
-```
+ 
 
 
 ## 字段组件属性

docs/guide/form/field/render-field.md

@@ -1,5 +1,8 @@
 # 渲染字段
 
+上文我们介绍的`useField`、`useFields`创建的字段是受控字段。
+
+
 字段渲染有`3`种方式：
 
 ## 简单字段
@@ -10,9 +13,10 @@
 <input name="user.firstName" />
 ```
 
+
 ## 封装字段
 
-当然，实际中的输入字段我们一般会进行封装，以便可以进行更多的控制。
+当然，实际中的`input`字段我们一般会进行封装，以便可以进行更多的外观控制。
 
 我们也可以在封装元素上通过`data-field-name='<状态路径>'`标识这是一个表单字段。
 

docs/guide/form/form/create.md

@@ -28,23 +28,48 @@ const { Form } = useForm({
 
 ### 第2步：使用`Form`组件
 
+```tsx
+<Form  
+  onSubmit={(e)=>{
+    // 提交表单
+  }}
+>
+    {/*  字段 */}
+</Form>
+```
+
+### 第3步：`Field`组件
+
+在`Form`组件内部，可以使用三种方式来创建`Field`组件。
+
 ```tsx
 <Form>
+  {/* 简单输入受控字段 */}
   <input name="user.firstName" />
-  <input name="user.lastName" />
-  <input name="user.age" />
-  <input name="user.vip" />
+  {/* 封装受控字段 */}
+  <div data-field-name="user.lastName">
+    <input/>
+  </div>
+  {/* 自定义字段 */}
+  <Field name="user.age" render={({bind})=>{
+    return <input {...bind}/>
+  }}/>
 </Form>
 ```
 
+更多的`Field`组件的用法请参考[Field组件](/guide/form/field/component.md)。
+
+### 第4步：提交表单
+
 就这么简单，轻松实现`表单`与`store.state`之间的双向绑定了，输入的数据会自动同步到`state`中，反之亦然。
 
+### 小结
+
 **下面是一个简单的示例：**
 
 <demo react="form/form/base.tsx"/>
 
 
-
 ## 绑定表单
 
 表单绑定的数据状态来源于：

docs/guide/form/form/use-form.md

@@ -36,111 +36,14 @@
 - **监听`state`的变化**
 
 使用`store.watch`监听`state`的变化，当`state`变化时，将数据更新到`name=<path>`的表单元素上即可。
-
-
-## 快速入门
-
-### 第1步： 创建表单
-
-首先，我们需要使用`useForm`创建一个表单。
-
-```tsx
-import { useForm } from "@autostorejs/react"
-
-const { Form } = useForm({
-  user:{
-    firstName:"Zhang",
-    lastName:"Fisher",
-    age:18,
-    vip:false 
-  }  
-})
-```
-
-
-- `useForm`内部调用`createStore`来创建一个`AutoStore`，所以其本质上`useForm`是一个`useStore`超集。所以`useForm`返回的对象中包含了`useStore`返回的对象。
-
-  ```tsx
-  const { useReactive,watch,$,.... } = useForm({...})
-  ```
-- `useForm`返回值中最主要的是`Form`组件，该组件是对标准`form`的封装。
-
-
-### 第2步：声明字段
-
-
-
-
-### 第3步：提交表单
-
-
-
-
-## 基本用法
-
-`useForm`返回一个`Form`组件，该组件是对标准`form`元素的封装。
-
-```tsx
-import { useForm } from "@autostorejs/react"
-const { Form } = useForm({
-  user:{
-    firstName:"Zhang",
-    lastName:"Fisher",
-    age:18,
-    vip:false 
-  }  
-}) 
-<Form>
-  <input name="user.firstName" />
-  <input name="user.lastName" />
-  <input name="user.age" />
-  <input name="user.vip" />
-</Form>
-```
-
-就这么简单，轻松实现`表单`与`store.state`之间的双向绑定了，输入的数据会自动同步到`state`中，反之亦然。
-
-
-**下面是一个简单的示例：**
-
-<demo react="form/form/base.tsx"/>
-
-
-
-:::info 提示
-配置`input`元素的`name=<状态数据路径>`即可。
-::: 
-
+ 
+ 
 
 
 ## 表单字段
 
 
 
-## Field组件
-
-`Field`组件是`useForm`提供的一个用于封装表单字段的高级组件，可以用于更加灵活的表单字段封装。
-
-`Field`组件的基本用法如下：
-
-```tsx
-
-const { Field, Form } = useForm({...})
-
-<Form onSubmit={}>
-    <Field 
-        name="user.firstName"     // 使用绑定的状态路径
-        validate={validate}       // 自定义校验规则
-        render={({value,timeout,....,bind})=>{
-          // 在此渲染表单字段
-          return <div>
-              <label>First Name</label>
-              <input {...bind} />
-            </div>
-        }} 
-    />
-</Form>
-```