ArrayItems 自增列表

适用于动态数组编辑场景的组件。

提示

本组件仅支持Schema的写法。

JSON Schema

tsx

import { ArrayItems, Form, FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { createSchemaField } from '@silver-formily/react'
import { useState } from 'react'

function ContactTitle() {
  return (
    <>
      联系人
      {ArrayItems.useIndex() + 1}
    </>
  )
}

const SchemaField = createSchemaField({ components: { ArrayItems, FormItem, Input } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function BasicDemo() {
  const [form] = useState(() => createForm({ initialValues: { contacts: [{}] } }))
  return (
    <Form form={form}>
      <SchemaField schema={{
        type: 'object',
        properties: {
          name: { 'type': 'string', 'title': '客户名称', 'x-decorator': 'FormItem', 'x-component': 'Input', 'x-component-props': { placeholder: '请输入客户名称' } },
          contacts: {
            'type': 'array',
            'x-component': 'ArrayItems',
            'items': {
              type: 'object',
              properties: {
                item: {
                  'type': 'void',
                  'x-component': 'ArrayItems.Item',
                  'x-component-props': { title: <ContactTitle />, extra: <ArrayItems.Remove aria-label="删除联系人" /> },
                  'properties': {
                    name: { 'type': 'string', 'title': '姓名', 'required': true, 'x-decorator': 'FormItem', 'x-component': 'Input', 'x-component-props': { placeholder: '请输入姓名' } },
                    address: { 'type': 'string', 'title': '地址', 'x-decorator': 'FormItem', 'x-component': 'Input', 'x-component-props': { placeholder: '请输入地址' } },
                  },
                },
              },
            },
            'properties': {
              addition: { 'type': 'void', 'title': '添加联系人', 'x-component': 'ArrayItems.Addition', 'x-component-props': { defaultValue: { name: '张三' } } },
            },
          },
        },
      }}
      />
      <FormButtonGroup><Submit onSubmit={onSubmit}>提交</Submit></FormButtonGroup>
    </Form>
  )
}

Markup Schema

注意

自定义组件若读取记录中的响应式属性，需要使用 observer 包装。

tsx

import { ArrayItems, Form, FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { createSchemaField } from '@silver-formily/react'
import { useState } from 'react'

function Actions() {
  return (
    <>
      <ArrayItems.MoveUp aria-label="上移" />
      <ArrayItems.MoveDown aria-label="下移" />
      <ArrayItems.Remove aria-label="删除" />
    </>
  )
}

const SchemaField = createSchemaField({ components: { ArrayItems, FormItem, Input } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function PrimitiveDemo() {
  const [form] = useState(() => createForm({ initialValues: { tags: ['工作', '生活'] } }))
  return (
    <Form form={form}>
      <SchemaField>
        <SchemaField.Array name="tags" x-component="ArrayItems">
          <SchemaField.Void
            x-component="ArrayItems.Item"
            x-component-props={{ mode: 'default', title: <ArrayItems.Index />, extra: <Actions /> }}
          >
            <SchemaField.String
              name="input"
              title="标签"
              x-decorator="FormItem"
              x-component="Input"
              x-component-props={{ placeholder: '请输入标签' }}
            />
          </SchemaField.Void>
          <SchemaField.Void title="添加标签" x-component="ArrayItems.Addition" x-component-props={{ defaultValue: '新标签' }} />
        </SchemaField.Array>
      </SchemaField>
      <FormButtonGroup><Submit onSubmit={onSubmit}>提交</Submit></FormButtonGroup>
    </Form>
  )
}

API

ArrayItems

属性	类型	说明
disabled	boolean	禁止数组操作，字段禁用状态建议使用 Formily pattern 配置
onAdd	(index: number) => void	新增后的索引
onRemove	(index: number) => void	删除的索引
onMoveUp / onMoveDown	(index: number) => void	移动前的索引

支持对象数组、基础类型数组和 tuple Schema；tuple 超出声明长度时回退使用第一个 items Schema。

ArrayItems.Item

ArrayItems.Item 作为 VoidField 的 component 使用。IArrayItemsItemProps 为每项提供独立的 FormLayout，并继承外层表单布局。

属性	类型	说明
title	ReactNode	标题，不自动生成；可组合 useIndex 或 Index
extra	ReactNode	标题右侧操作区，不自动添加删除按钮
mode	'card' \| 'default'	默认 card
children	ReactNode	项内字段

未设置 title 和 extra 时不显示标题区。

操作与 hooks

ArrayItems 复用 ArrayBase 的 Addition、Remove、MoveUp、MoveDown、Index、Empty、useArray、useIndex 和 useRecord，详细属性及状态行为见 ArrayBase。

ArrayItems 自增列表 ​

JSON Schema ​

Markup Schema ​

API ​

ArrayItems ​

ArrayItems.Item ​