FormConsumer ​

Description ​

A form reactive consumer, a component dedicated to implementing various UI responses by listening to form model data changes. It is used with render props.

The callback function re-renders whenever the data it depends on changes.

See Form for Form.

Usage ​

import { createForm } from '@silver-formily/core'
import { Field, FormConsumer, FormProvider } from '@silver-formily/react'
import { Input } from 'antd'

const form = createForm()

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field name="input" component={[Input]} />
      {/* children 是函数时，依赖的表单数据变化会触发回调重新执行 */}
      <FormConsumer>
        {form => form.values.input ? [<span key="value">{form.values.input}</span>, '（已输入）'] : null}
      </FormConsumer>
    </FormProvider>
  )
}

import { createForm } from '@silver-formily/core'
import { Field, FormConsumer, FormProvider } from '@silver-formily/react'
import { Input } from 'antd'

const form = createForm()

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field name="input" component={[Input]} />
      {/* children 是函数时，依赖的表单数据变化会触发回调重新执行 */}
      <FormConsumer>
        {form => form.values.input ? [<span key="value">{form.values.input}</span>, '（已输入）'] : null}
      </FormConsumer>
    </FormProvider>
  )
}

API ​

FormConsumer children ​

children is optional. When provided it must be a render function; its result may be any ReactNode, including null, arrays, text, and elements. It needs FormProvider context and tracks the reactive reads performed inside the callback.