CascadePicker

CascadePicker 是 antd-mobile 级联选择器的 Formily 适配。

提示

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

基础使用

tsx

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

const SchemaField = createSchemaField({ components: { CascadePicker, FormItem } })
const schema = {
  type: 'object',
  properties: {
    address: {
      'type': 'array',
      'title': '所在地区',
      'required': true,
      'enum': options,
      'x-decorator': 'FormItem',
      'x-decorator-props': { clearable: true },
      'x-component': 'CascadePicker',
      '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: { address: ['zhejiang', 'hangzhou', 'xihu'] } }), [])
  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

禁用、只读与预览

displayRender 用于编辑态和预览态。

提示

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

tsx

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

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

export default function PatternsDemo() {
  const form = useMemo(() => createForm({ initialValues: {
    disabled: ['zhejiang', 'hangzhou', 'xihu'],
    readOnly: ['zhejiang', 'ningbo', 'haishu'],
    preview: ['jiangsu', 'suzhou', 'gusu'],
  } }), [])
  return (
    <FormProvider form={form}>
      <Field name="disabled" title="禁用" pattern="disabled" dataSource={options} decorator={[FormItem, { clearable: true }]} component={[CascadePicker]} />
      <Field name="readOnly" title="只读" pattern="readOnly" dataSource={options} decorator={[FormItem, { clearable: true }]} component={[CascadePicker]} />
      <Field name="preview" title="自定义预览" pattern="readPretty" dataSource={options} decorator={[FormItem]} component={[CascadePicker, { displayRender: labels => labels.join(' > ') }]} />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API

属性	说明	默认值
`placeholder`	ReactNode，空值时的提示	`请选择`
`displayRender`	`(labels, selectedOptions) => ReactNode`，自定义展示	标签以 `/` 分隔
`aria-label`	触发按钮名称	Field 的字符串标题

其余原生配置与事件直接透传，不支持 defaultValue、visible 或 children。原生接口参考 antd-mobile CascadePicker 文档。

CascadePicker ​

基础使用 ​

禁用、只读与预览 ​

API ​

CascadePicker

基础使用

禁用、只读与预览

API