Skip to content

Commit 90526db

Browse files
zhangfisherzhangfisher
committed
update
1 parent 15a7663 commit 90526db

File tree

17 files changed

+149
-107
lines changed

17 files changed

+149
-107
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,9 @@ export default defineConfig({
110110
collapsed: true,
111111
items:[
112112
{ text:"关于",link:"/guide/form/form/about"},
113-
{ text:"基本用法",link:"/guide/form/form/basic"},
113+
{ text:"创建",link:"/guide/form/form/create"},
114114
{ text:"useForm",link:"/guide/form/form/use-form"},
115-
{ text:"多表单",link:"/guide/form/form/mulit-form"},
115+
{ text:"提交表单",link:"/guide/form/form/submit"},
116116
]
117117
},
118118
{

‎docs/demos/form/field/bindField.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react"
22
import { createStore } from '@autostorejs/react';
33
import { Layout,Button,Input,JsonView } from "x-react-components"
44

5-
const { bind, useReactive } = createStore({
5+
const { bind, useReactive,reset } = createStore({
66
user:{
77
firstName:"Zhang",
88
lastName:"Fisher",
@@ -15,8 +15,8 @@ const { bind, useReactive } = createStore({
1515

1616

1717
export default ()=>{
18-
const [firstName,setFirstName] = useReactive("user.firstName")
19-
const [lastName,setLastName] = useReactive("user.lastName")
18+
const [firstName ] = useReactive("user.firstName")
19+
const [lastName ] = useReactive("user.lastName")
2020
const [vip ] = useReactive("user.vip")
2121
const [state] = useReactive()
2222
return <Layout>
@@ -25,8 +25,7 @@ export default ()=>{
2525
<Input label="last Name" {...bind("user.lastName")} value={lastName}/>
2626
<Input type="checkbox" label="VIP" {...bind("user.vip")} value={String(vip)}/>
2727
<Button onClick={()=>{
28-
setFirstName("Zhang")
29-
setLastName("Fisher")
28+
reset()
3029
}}>Reset</Button>
3130
</div>
3231
<div>

‎docs/demos/form/field/useFieldBase.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react"
22
import { createStore } from '@autostorejs/react';
33
import { Button,Input,Layout, JsonView, Select, Radio } from "x-react-components"
44

5-
const { batchUpdate, useField,useReactive } = createStore({
5+
const { reset, useField,useReactive } = createStore({
66
user:{
77
firstName:"Zhang",
88
lastName:"Fisher",
@@ -37,10 +37,7 @@ export default ()=>{
3737
<Radio label="男" {...fieldSex[0]}/>
3838
<Radio label="女" {...fieldSex[1]}/>
3939
<Button onClick={()=>{
40-
batchUpdate((state)=>{
41-
state.user.firstName = "Zhang"
42-
state.user.lastName = "Fisher"
43-
})
40+
reset()
4441
}}>Reset</Button>
4542
</div>
4643
<div>

‎docs/demos/form/field/useFieldCombo.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { createStore } from '@autostorejs/react';
33
import { Button,Input, Layout, JsonView } from "x-react-components"
44

5-
const { batchUpdate,useReactive,useField } = createStore({
5+
const { reset,useReactive,useField } = createStore({
66
user:{
77
firstName:"Zhang",
88
lastName:"Fisher"
@@ -24,10 +24,7 @@ export default ()=>{
2424
<div>
2525
<Input label="FullName" {...bindFullName}/>
2626
<Button onClick={()=>{
27-
batchUpdate(state=>{
28-
state.user.firstName= "Zhang"
29-
state.user.lastName = "Fisher"
30-
})
27+
reset()
3128
}}>Reset</Button>
3229
</div>
3330
<div>

‎docs/demos/form/field/useFieldIpAddress.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { createStore } from '@autostorejs/react';
33
import { Field,Button,Input, Layout, JsonView } from "x-react-components"
44

5-
const { batchUpdate,useReactive,useField } = createStore({
5+
const { reset,useReactive,useField } = createStore({
66
net:{
77
ip:"127.0.0.1"
88
}
@@ -33,9 +33,7 @@ export default ()=>{
3333
<Input type="number" inline center width={60} max={255} {...ipParts[3]}/>
3434
</Field>
3535
<Button onClick={()=>{
36-
batchUpdate(state=>{
37-
state.net.ip= "127.0.0.1"
38-
})
36+
reset()
3937
}}>Reset</Button>
4038
</div>
4139
<div>

‎docs/demos/form/field/useFieldsBase.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Layout,JsonView,Button,Input, Select, Radio } from "x-react-components"
44

55
export default ()=>{
66

7-
const { batchUpdate,useFields,useReactive } = useStore({
7+
const { reset,useFields,useReactive } = useStore({
88
user:{
99
firstName:"Zhang",
1010
lastName:"Fisher",
@@ -40,12 +40,7 @@ export default ()=>{
4040
<Radio label="Cat" {...fields.user.pets[1]}/>
4141
<Radio label="Fish" {...fields.user.pets[2]}/>
4242
<Button onClick={()=>{
43-
batchUpdate(state=>{
44-
state.user.firstName= "Zhang"
45-
state.user.lastName = "Fisher"
46-
state.user.age = 18
47-
state.user.vip = false
48-
})
43+
reset()
4944
}}>Reset</Button>
5045
</div>
5146
<div>

‎docs/demos/form/form/fromStore.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default ()=>{
2626
<Layout>
2727
<div>
2828
<Form>
29-
<Spin value="10"/>
29+
<Spin name="users.0.age" label="Age"/>
3030
<Input name="users.0.name" label="Name"/>
3131
<Input name="users.0.age" label="Age" type="number"/>
3232
<Input name="users.0.address" label="Address"/>

‎docs/guide/form/field/bind.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<demo react="form/field/bindField.tsx"/>
77

8-
- `bind(<状态路径>)`返回`input`的`onChange`方法，将之直接`{...bind("")}`解构到`input`元素上即可。
8+
- `bind(<状态路径>)`返回`input`的`onChange`方法，将之直接`{...bind("状态路径")}`解构到`input`元素上即可。
99
- `bind`参数可以是任意深度的路径，如`bind("user.name")`。
1010
- `bind`事实上仅仅是返回一个`onChange`而已，其功能代码非常简单，如下：
1111

‎docs/guide/form/form/basic.md‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎docs/guide/form/form/create.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
2+
# 创建表单
3+
4+
使用`useForm`返回`Form`或`Field`等来创建组件。
5+
6+
## 创建表单
7+
8+
可以通过`useForm`创建一个全新的表单，如下：
9+
10+
### 第1步：引入`useForm`
11+
12+
```tsx
13+
import { useForm } from "@autostorejs/react"
14+
const { Form } = useForm({
15+
user:{
16+
firstName:"Zhang",
17+
lastName:"Fisher",
18+
age:18,
19+
vip:false
20+
}
21+
})
22+
```
23+
24+
:::warning 提示
25+
`useForm`内部会创建一个`AutoStore`实例，用于存储表单数据。
26+
:::
27+
28+
29+
### 第2步：使用`Form`组件
30+
31+
```tsx
32+
<Form>
33+
<input name="user.firstName" />
34+
<input name="user.lastName" />
35+
<input name="user.age" />
36+
<input name="user.vip" />
37+
</Form>
38+
```
39+
40+
就这么简单，轻松实现`表单`与`store.state`之间的双向绑定了，输入的数据会自动同步到`state`中，反之亦然。
41+
42+
**下面是一个简单的示例：**
43+
44+
<demo react="form/form/base.tsx"/>
45+
46+
47+
48+
## 绑定表单
49+
50+
表单绑定的数据状态来源于：
51+
52+
- 全新创建的`Store`实例
53+
- 绑定到现有的`Store`实例
54+
55+
### 新建Store
56+
57+
使用`useForm(state)`创建一个全新的表单，内部会创建一个`Store`实例。所有`AutoStore`的API都可以使用。
58+
59+
```ts
60+
import { useForm } from "@autostorejs/react"
61+
const {
62+
Form,
63+
state,
64+
useReactive,
65+
$,
66+
watch,
67+
batchUpdate
68+
signal,
69+
useState,
70+
useAsyncState,
71+
useAsyncReactive,
72+
useDeps,
73+
useWatch,
74+
bind,
75+
useField,
76+
useFields,
77+
useObserverObject,
78+
useComputedObject,
79+
useComputed,
80+
reset
81+
} = useForm({
82+
user:{
83+
firstName:"Zhang",
84+
lastName:"Fisher",
85+
age:18,
86+
vip:false
87+
}
88+
})
89+
```
90+
91+
### 绑定现有Store
92+
93+
`useForm`还可以基于现有的`Store`实例创建表单，如下：
94+
95+
<demo react="form/form/fromStore.tsx" />
96+
97+
98+
## 多表单
99+
100+
`useForm`提供了一个`entry`参数，允许截取`AutoStore`中的局部状态来创建表单。
101+
102+
<demo react="form/form/multiForm.tsx" />

0 commit comments

Comments
 (0)