Field组件

如果您想要对字段进行更精细的控制，则推荐使用Field组件。Field组件是创建表单自定义字段组件的终极武器，允许您完全控制字段的渲染、校验、可视、使能等等，并且所有字段特性属性均可以使用计算属性声明，这使用Field组件具有超强的自定义能力，还可以很轻松地实现表单字段之间的联动。

快速上手

第1步：创建Form

使用useForm创建一个Form实例。

import { useForm } from 'autostore';
const { Form,Field } = useForm({
    user: {
      firstName: 'John',
      lastName: 'Doe'
    }
}

useForm内部会创建一个AutoStore实例，然后基于该实例构建一系列与表单相关的API及组件，其中最主要的就是Form组件和Field组件。

第2步：创建Field

使用Field组件创建一个字段。

    <Field  
        name="user.firstName" 
        render={
            ({name, value, onChange }) => {
                return <input name={name} value={value} onChange={e => onChange(e.target.value)} />
            }
        }
    />

Field组件至少要求提供name和render两个属性。

• name: 指向的是状态树中的某个字段的路径，如user.firstName。
• render: 用于渲染Field组件，它接收一个AutoFieldRenderProps类型的参数，负责渲染Field组件。

第3步：配置字段校验

Field组件支持validate属性用于配置字段的校验规则。

<Field
    validate={(value)=>{
        return assert(value.length>3,"长度必须大于3")
    }}
    //...
/>

• validate该属性的值用于创建一个依赖于当前字段（name指向的状态）状态的计算或监听属性，并且其scope也指向当前字段的值。 当字段值发生变化时，会重新计算该属性的值，从而会触发校验。
• validate计算函数返回true/false来代表校验是否通过。也可以throw Error，然后通过错误对象的message属性来获取错误信息并传递给render函数。

第4步：字段渲染

Field组件支持render属性用于渲染字段。

render属性的值是一个函数，该函数接收一个AutoFieldRenderProps类型的参数，负责渲染Field组件。

<Field
    name="user.firstName"
    render={
        ({name, value, bind }) => {
            return <input {...bind} />
        }
    }/>

小结

提示

Field组件可以与useField/useFields混用。

字段校验

Field组件支持通过validate参数进行校验。

validate参数是一个同步或异步计算属性，返回boolean，如果校验失败，则应抛出错误。

因为validate属性是用于创建计算属性，所以可以使用computed、watch等方法来动态声明validate属性。

• 简单的同步计算校验

<Field
    validate={(value)=>{
        return assert(value.length>3,"长度必须大于3")
    }}
    //...
/>

• 简单的异步计算校验

<Field
    validate={async (value)=>{
        return assert(value.length>3,"长度必须大于3")
    }}
    //...    
/>

• 异步计算校验

import { computed } from "@autostorejs/react"
<Field
    validate={computed(async (value)=>{
        return assert(value.length>3,"长度必须大于3")
    },[])}
    // ...
/>

• 监听校验

import { watch } from "@autostorejs/react"
<Field
    validate={watch(async ({path,value})=>{
        return assert(value.length>3,"长度必须大于3")
    },()=>{...})}
    // ...
/>

字段组件属性

字段组件的属性支持如果下：