快速入门

第1步： 创建表单

首先，我们需要使用useForm创建一个表单。

import { useForm } from "@autostorejs/react"

const { Form } = useForm({
  user:{
    firstName:"Zhang",
    lastName:"Fisher",
    age:18,
    vip:false 
  }  
})

• useForm内部调用createStore来创建一个AutoStore，所以其本质上useForm是一个useStore超集。所以useForm返回的对象中包含了useStore返回的对象。

  const { useReactive,watch,$,.... } = useForm({...})

• useForm返回值中最主要的是Form组件，该组件是对标准form的封装。

第2步：声明字段

最简单的方式中 使用data-field-name标识表单字段。

const { Form } = useForm({...})

<Form>
  <label>First Name</label>
  <input data-field-name="user.firstName"/>  
  <label>Last Name</label>
  <input data-field-name="user.lastName"/>  
  <label>Age</label>
  <input data-field-name="user.age" type="number"/>  
  <label>VIP</label>
  <input data-field-name="user.vip" type="checkbox"/>
</Form>

只需要在input/select/textarea元素上添加data-field-name属性，值为字段的路径即可。

也可以在任意元素上添加data-field-name属性，如div、span等。

const { Form } = useForm({...})

<Form>
  <div data-field-name="user.firstName">
    <label>First Name</label>
    <input/>
  </div>  
</Form>

表单会自动识别div元素下的input元素，然后自动绑定字段。 此方式有利于更好的组织表单的DOM结构，进行样式外观控制。

提示

AutoStore还提供了Field组件，可以更加灵活的控制表单字段。详见后续章节。

第3步：提交表单

<Form 
    action="/adduser"
    onSubmit={async (state)=>{
        await delay(2000)
        console.log("表单数据=",state)
    }}
>
    <label>First Name</label>
    <input data-field-name="user.firstName"/>  
    <label>Last Name</label>
    <input data-field-name="user.lastName"/>  
    <label>Age</label>
    <input data-field-name="user.age" type="number"/>  
    <label>VIP</label>
    <input data-field-name="user.vip" type="checkbox"/>
    <button type="submit">Submit</button>
</Form>

小结

• 使用useForm创建表单。
• 使用data-field-name声明字段。
• 表单控件的数据会自动同步到AutoStore中。
• 提交表单时会触发onSubmit事件，可以在事件中获取表单数据。
• AutoStore还提供了Field组件，可以更加灵活的控制表单字段。

提示

表单功能还支持更多的高级功能，如脏检查、校验、提交、重置等。详见后续章节。