useField

描述

主要用在自定义组件内读取当前字段属性，操作字段状态等，在所有 Field 组件的子树内都能使用，注意，拿到的是GeneralField，如果需要对不同类型的字段做处理，请使用Type Checker

WARNING

注意：如果要在自定义组件内使用 useField，并响应字段模型变化，需要使用 observer 包裹自定义组件

签名

import type { GeneralField } from '@silver-formily/core'

declare function useField<T = GeneralField>(): T

与 Vue 版不同，React 版直接返回字段实例本身，而不是 Ref。

用例

tsx

import type { Field as FieldType } from '@silver-formily/core'
import { createForm, setValidateLanguage } from '@silver-formily/core'
import { Field, FormConsumer, FormProvider, observer, useField } from '@silver-formily/react'
import { Button, Form, Input } from 'antd'

setValidateLanguage('en')

// 装饰器组件内通过 useField 读取字段实例，需要 observer 包裹才能响应字段变化
const FormItem = observer((props: { children?: React.ReactNode }) => {
  const field = useField<FieldType>()
  return (
    <Form.Item
      label={field?.title}
      required={field?.required}
      help={field?.selfErrors?.[0]}
      validateStatus={field?.validateStatus ?? undefined}
    >
      {props.children}
    </Form.Item>
  )
})

const form = createForm({ validateFirst: true })

function log(values: string) {
  console.warn('Form Submitted:', values)
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Form layout="vertical">
        <Field
          name="name"
          title="Name"
          required
          decorator={[FormItem]}
          component={[Input, { placeholder: 'Please Input' }]}
        />
        <FormConsumer>
          {_form => (
            <>
              <div style={{ whiteSpace: 'pre', marginBottom: 16 }}>
                {JSON.stringify(_form.values, null, 2)}
              </div>
              <Button type="primary" onClick={() => form.submit(log)}>
                Submit
              </Button>
            </>
          )}
        </FormConsumer>
      </Form>
    </FormProvider>
  )
}

查看源码

该 hook 只读取上下文，不创建模型，也不订阅模型属性。应在对应 Provider 下使用；即使部分签名未声明空值，缺少或被清理的上下文在运行时仍可能返回 null/undefined。

useField ​

描述 ​

签名 ​

用例 ​

useField

描述

签名

用例