Rx Form State
Edit page
开始
教程
API
useFormStateFormStateContextFieldFieldArrayFormValueMonitoruseFormStateContextuseFormSelectuseFormSubmittinguseFielduseFieldStateuseFieldErroruseFieldValueuseFieldToucheduseFieldArrayuseFieldArray 返回的属性和方法关联RelyRule

useFieldArray

辅助开发嵌套表单的 Hook。

import { useFieldArray } from '@sinoui/rx-form-state';
function Demo() {
  const helpers = useFieldArray('contacts');
  return (
    <div>
      {helpers.items.map((item) => (
        <div>
          <Field as="input" name={helpers.getFieldName('name')} />
        </div>
      ))}
    </div>
  );
}

useFieldArray 返回的属性和方法

属性、方法类型描述
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获取表单域名称。

关联

  • FieldArray
  • 嵌套表单教程