AutoStore

Appearance

useField ​

关于 ​

bind绑定控件的功能比较简单，useField进行双向绑定更加简单。

useField签名如下：

ts
type UseFieldBindings<Value> = Value extends Dict ? Record<keyof Value,{
    value:any
    onChange:(e:any)=>void
}> : Value

type UseFieldOptions={}

type UseFieldGetter<Value,State extends Dict>= (state:ComputedState<State>)=>Value
type UseFieldSetter<Value,State extends Dict>= (input:Value,state:ComputedState<State>)=>void

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

基本用法 ​

可以直接通过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支持如下的调用签名：

ts
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和options.fromState参数，可以在input和状态值之间进行转换。

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