快速入门

第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步：声明字段

声明字段有3种方式：

简单字段

只需要为input、textarea、select元素设置name属性，且name为一个字符串路径指向状态即可。

<input name="user.firstName" />

封装字段

当然，实际中的输入字段我们一般会进行封装，以便可以进行更多的控制。

我们也可以在封装元素上通过data-field-name='<状态路径>'标识这是一个表单字段。

<div data-field-name="user.name" >
  <label>First Name</label>
  <input/>  
  <span className="invalid"></span>
</div>

• 使用data-field-name标识表单字段可以让表单能进行更多的控制。

Field字段组件

使用Field字段组件可以实现更复杂的控制，如校验、字段联动等等

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

<Field 
  name="user.name"
  validate={(value)=>value.length>=3}
  render={({value,validate,onChange,name,error})=>{
    return <>
      <label>First Name</label>
      <input name={name} value={value} onChange={onChange}/>  
      <span className="invalid"></span>
      </>
  }}
/>

第3步：提交表单