ArrayField
Description
As the React implementation of createArrayField from @silver-formily/core, it is a bridge component dedicated to binding a ViewModel to an input control. See IFieldFactoryProps for the ArrayField component props.
The name attribute is required. Use render props or a custom component to render the list; plain ReactNode children are also accepted.
Usage
tsx
import { createForm } from '@silver-formily/core'
import { ArrayField, Field, FormProvider } from '@silver-formily/react'
import { Button, Input, Space } from 'antd'
const form = createForm()
export default function Demo() {
return (
<FormProvider form={form}>
<ArrayField name="array">
{field => (
<div>
{(field.value || []).map((item, index) => (
<div
key={`${item.id}-${index}`}
style={{ marginBottom: 10 }}
>
<Space>
<Field name={`${index}.value`} component={[Input]} />
<Button onClick={() => field.remove(index)}>
Remove
</Button>
<Button onClick={() => field.moveUp(index)}>
Move Up
</Button>
<Button onClick={() => field.moveDown(index)}>
Move Down
</Button>
</Space>
</div>
))}
<Button onClick={() => field.push({ id: Date.now(), value: '' })}>
Add
</Button>
</div>
)}
</ArrayField>
</FormProvider>
)
}tsx
import { createForm } from '@silver-formily/core'
import { ArrayField, Field, FormProvider } from '@silver-formily/react'
import { Button, Input, Space } from 'antd'
const form = createForm()
export default function Demo() {
return (
<FormProvider form={form}>
<ArrayField name="array">
{field => (
<div>
{(field.value || []).map((item, index) => (
<div
key={`${item.id}-${index}`}
style={{ marginBottom: 10 }}
>
<Space>
<Field name={`${index}.value`} component={[Input]} />
<Button onClick={() => field.remove(index)}>
Remove
</Button>
<Button onClick={() => field.moveUp(index)}>
Move Up
</Button>
<Button onClick={() => field.moveDown(index)}>
Move Down
</Button>
</Space>
</div>
))}
<Button onClick={() => field.push({ id: Date.now(), value: '' })}>
Add
</Button>
</div>
)}
</ArrayField>
</FormProvider>
)
}查看源码
API
Props follow Field, but the children callback receives ArrayField. See the Field API for shared props.
ts
import type { ArrayField as Model } from '@silver-formily/core'
import type { IFieldProps, JSXComponent } from '@silver-formily/react'
type Props<D extends JSXComponent, C extends JSXComponent> = IFieldProps<D, C, Model>