useField

尽管只需要指定data-field-name属性就可以实现双向绑定。但是在实际开发中，我们通常需要更多的控制和功能，此时就需要使用useField来创建一个双向字段绑定对象。

useField可以实现如下功能：

支持多个状态值绑定到一个input上。
支持将一个状态值拆分绑定到多个input上。
支持在input和状态值之间进行双向转换。

关于

useField用来创建一个表单控件绑定对象，用来建立状态数据与input控件之间的双向绑定。

useField签名如下：


export interface UseFieldType<State extends Dict> {
    (): UseFieldBindings<ComputedState<State>>
    <Value>(
        selector: ObjectKeyPaths<ComputedState<State>>,
        options?:UseFieldOptions<Value>
    ): UseFieldBindings<Value>
    <Value>(
        getter: UseFieldGetter<Value,State>,
        setter:UseFieldSetter<Value,State>,
        options?:UseFieldOptions<Value>
    ):UseFieldBindings<Value>
    <Value>(
        getters: (ObjectKeyPaths<ComputedState<State>> | string[] | UseFieldGetter<Value,State>)[],
        setter:UseFieldSetter<Value,State>,
        options?:UseFieldOptions<Value>
    ):UseFieldBindings<Value>[]
}

useField支持如下的调用签名：

useField(selector,options?)

通过selector指定一个状态路径，创建一个双向字段绑定对象。

useField(getter,setter,options?)

通过getter和setter方法，创建一个动态字段绑定对象。当要实现将多个状态值合并后绑定到一个input时使用。

useField(getters,setter,options?)

当要实现将多个状态值绑定到多个input上或者进行单个状态数据的拆分时使用。

基本用法

可以直接通过useField(<状态路径>)来创建一个双向字段绑定对象，然后解构到input控件即可。

状态路径可以是任意深度的字符串或字符串数组，如useField("order.user.name")。
input[type='radio']的字段需要指定{type:'radio',values:['男','女']})选项，然后在每一个radio上指定value值绑定。

合并状态绑定

可以实现将多个状态值合并后绑定到一个input

上例中，我们通过getter和setter方法，将firstName & lastName合并后绑定到1个input。
getter方法用于将状态值合并成一个值。
setter方法负责解析input值,并将其分解更新到状态中。

拆分状态绑定

也支持将多个状态值绑定到多个input上。

useField支持如下的调用签名：

useField<Value>(
    getters: (string | string[] | UseFieldGetter<Value,State>)[],
    setter:UseFieldSetter<Value,State>,
    options?:UseFieldOptions
):UseFieldBindings<Value>[]

getters: 输入一个getter数组，每个getter可以是字符串或字符串数组的状态路径，也可以是一个getter函数。
setter: 一个setter函数，用于解析input值并更新到状态中。

以下是简单的示例：

转换状态值

通过指定options.toState参数，可以将input值转换后写入状态。

下例中输入的字符会被转换为大写再更新到状态

配置字段

useField支持如下的配置选项：

type UseFieldOptions<Value=any>={
    name?       : string      // 可选的字段名称    
    type?       : 'radio' | 'checkbox' | 'select' | 'textarea' | 'input'
    // 仅当type = radio或checkbox时有效时有效
    values?     : any[] 
    toState?    : (value:string,options?:{path:string[] | undefined,part:number})=>Value    // 将数据更新到状态中时调用进行转换
}

name: 可选的字段名称，用于标识字段。
type: 控件类型，支持radio、checkbox、select、textarea、input。
values: 仅当type = radio或checkbox时有效时有效，用于指定radio或checkbox的值。
toState: 用于将input值转换为状态值的函数。

提示

不需要Form组件包装，useField也可以独立使用，用来实现表单控件（radio/checkbox/select/textarea/input）与状态之间的双向绑定。这在某些场景下会更加灵活方便。

useField ​

关于 ​

基本用法 ​

合并状态绑定 ​

拆分状态绑定 ​

转换状态值 ​