Rx Form State
Edit page
开始
教程
API
useFormStateFormStateContextFieldFieldArray属性helpers 提供的属性和方法关联FormValueMonitoruseFormStateContextuseFormSelectuseFormSubmittinguseFielduseFieldStateuseFieldErroruseFieldValueuseFieldToucheduseFieldArrayRelyRule

FieldArray

辅助开发嵌套表单的组件。

import { FieldArray } from '@sinoui/rx-form-state';

使用方式如下：

<FieldArray<T> name="contacts">
  {(helpers) =>
    helpers.items.map((item) => (
      <div>
        <Field as="input" name={helpers.getFieldName('name')} />
      </div>
    ))
  }
</FieldArray>

查看嵌套表单教程，学习更多关于嵌套表单的用法。

属性

helpers 提供的属性和方法

属性、方法类型描述
itemsT[]嵌套表单列表数据项。
push(item: T) => void添加一条数据。
insert(index: number, item: T) => void在指定位置插入一条数据。
remove(index: number) => void删除指定位置的数据。
move(fromIndex: number, toIndex: number) => void将数据移动到toIndex位置。
swap(indexA: number, indexB: number) => void交换indexA和indexB两个位置上的数据。
replace(index: number, item: T) => void替换数据项。
pop() => void移除数组的最后一个数据项。
unshift(item: T) => void在数组的头部添加数据项。
getFieldName(index: number, subFieldName?: string) => void获取表单域名称。

关联

  • useFieldArray
  • 嵌套表单教程