Picker

Picker 是 antd-mobile 多列选择器的 Formily 适配，内部使用声明式原生 Picker。

提示

关于 Picker 组件的右侧箭头相关逻辑请参考 FormItem 中的箭头与清除按钮

基础使用

tsx

import { FormButtonGroup, FormItem, Picker, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

const SchemaField = createSchemaField({ components: { FormItem, Picker } })
const schema = {
  type: 'object',
  properties: {
    fruit: {
      'type': 'array',
      'title': '水果',
      'required': true,
      'enum': [[{ label: '苹果', value: 'apple' }, { label: '梨', value: 'pear' }]],
      'x-decorator': 'FormItem',
      'x-component': 'Picker',
      'x-component-props': {
        placeholder: '请选择水果',
      },
    },
  },
}

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

export default function BasicDemo() {
  const form = useMemo(() => createForm({ initialValues: { fruit: ['apple'] } }), [])
  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

两列选择

使用二维 dataSource 配置两列，每个子数组对应一列选项。两列独立选择，确认后保存为值数组。

tsx

import { FormButtonGroup, FormItem, Picker, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

const dataSource = [
  [{ label: '热饮', value: 'hot' }, { label: '冷饮', value: 'cold' }],
  [{ label: '咖啡', value: 'coffee' }, { label: '茶', value: 'tea' }],
]

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

export default function ColumnsDemo() {
  const form = useMemo(() => createForm({ initialValues: { drink: ['hot', 'tea'] } }), [])
  return (
    <FormProvider form={form}>
      <Field name="drink" title="饮品" dataSource={dataSource} decorator={[FormItem]} component={[Picker, { title: '选择饮品' }]} />
      <FormButtonGroup><Submit onSubmit={onSubmit}>提交</Submit></FormButtonGroup>
    </FormProvider>
  )
}

禁用、只读与预览

displayRender 用于编辑态和预览态。

提示

displayRender 是所有Picker类型组件通用的配置项。

tsx

import { FormButtonGroup, FormItem, Picker, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

const dataSource = [[{ label: '普通配送', value: 'standard' }, { label: '加急配送', value: 'express' }]]

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

export default function PatternsDemo() {
  const form = useMemo(() => createForm({ initialValues: { self: ['standard'], disabled: ['standard'], readOnly: ['express'], preview: ['express'] } }), [])
  return (
    <FormProvider form={form}>
      <Field name="self" title="整行点击 / 清除" decorator={[FormItem, { clearable: true }]} dataSource={dataSource} component={[Picker]} />
      <Field name="disabled" title="禁用" disabled={true} decorator={[FormItem]} dataSource={dataSource} component={[Picker]} />
      <Field name="readOnly" title="只读" readOnly={true} decorator={[FormItem]} dataSource={dataSource} component={[Picker]} />
      <Field
        name="preview"
        title="预览"
        readPretty={true}
        dataSource={dataSource}
        decorator={[FormItem]}
        component={[Picker]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API

导出 Picker、IPickerProps 和底层受控组件 BasePopupPicker。底层组件无本地值状态，也不提供非受控 defaultValue；一般应通过 Formily Field 或 Schema 使用 Picker。

属性	说明
`placeholder`	ReactNode，默认“请选择”
`displayRender`	`(value, props) => ReactNode`，自定义展示
`aria-label`	入口名称，默认使用 Field 的字符串标题

原生 Picker 支持的其余参数与事件直接透传。不支持 visible、children、trigger 或清空配置。

原生接口参考 antd-mobile Picker 文档。

Picker ​

基础使用 ​

两列选择 ​

禁用、只读与预览 ​

API ​

Picker

基础使用

两列选择

禁用、只读与预览

API