ObjectField

描述

作为 @silver-formily/core 中 createObjectField 的 React 实现，它是专门用于将 ViewModel 与输入控件做绑定的桥接组件，ObjectField 组件属性参考 IFieldFactoryProps

name 属性必填。子字段直接写在 children 中即可。

用例

tsx

import type { ObjectField as ObjectFieldType } from '@silver-formily/core'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider, ObjectField } from '@silver-formily/react'
import { Button, Input, Space } from 'antd'

const form = createForm()

function addPropertyToField(field: ObjectFieldType) {
  const name = form.values.propertyName
  if (name && !form.existValuesIn(`object.${name}`)) {
    field.addProperty(name, '')
    form.deleteValuesIn('propertyName')
  }
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <ObjectField name="object">
        {field => (
          <div>
            {Object.keys(field.value || {}).map(key => (
              <div key={key} style={{ marginBottom: 10 }}>
                <Space>
                  <Field name={key} component={[Input, { placeholder: key }]} />
                  <Button onClick={() => field.removeProperty(key)}>
                    Remove
                  </Button>
                </Space>
              </div>
            ))}
            <Space>
              <Field
                name="propertyName"
                basePath=""
                required
                component={[Input, { placeholder: 'Property Name' }]}
              />
              <Button onClick={() => addPropertyToField(field)}>
                Add
              </Button>
            </Space>
          </div>
        )}
      </ObjectField>
    </FormProvider>
  )
}

查看源码

API

属性基于 Field，但 children 回调中的字段类型为 ObjectField。完整公共属性参见 Field。

import type { ObjectField 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>

ObjectField ​

描述 ​

用例 ​

API ​

ObjectField

描述

用例

API