前端UI组件【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址https://gitcode.com/gh_mirrors/fo/formily点击查看免费下载NumberPicker 是 Formily 基于 Fusion Designalifd/next数字输入框封装的高阶表单组件用于数字类型的录入、步进调节与范围约束。本文以 formily/next 包中的 NumberPicker 组件为核心完整演示 Markup Schema、JSON Schema、Pure JSX 三种接入方式的实战代码并深入 connect 源码揭示其字段状态映射size/status、只读预览readPretty与 FormLayout 尺寸联动的底层机制帮助你在 Formily 表单体系中正确、高效地使用数字输入组件。一、组件定位与适用场景NumberPicker 在 Formily 中承担数字输入框的角色位于formily/next包内。它并非从零实现的组件而是对阿里 Fusion Design 的NumberPickeralifd/next进行的协议化封装通过formily/react的connect高阶能力把表单字段的校验状态、尺寸、只读态等自动映射到 Fusion 数字输入框上。它适合以下典型场景数量、金额、年龄、价格等纯数字字段录入需要步进器上/下箭头微调数值需要限定最小值、最大值、整数位/小数位精度在详情展示场景下以只读预览形式回显数字。从源码看NumberPicker 的完整实现在 number-picker/index.tsx核心只有几行import { connect, mapProps, mapReadPretty } from formily/react import { NumberPicker as InputNumber } from alifd/next import { PreviewText } from ../preview-text import { mapSize, mapStatus } from ../__builtins__ export const NumberPicker connect( InputNumber, mapProps(mapSize, mapStatus), mapReadPretty(PreviewText.NumberPicker) ) export default NumberPicker可以看到底层输入框来自alifd/next接入字段后由mapProps(mapSize, mapStatus)自动注入尺寸与状态由mapReadPretty(PreviewText.NumberPicker)接管只读预览渲染。组件样式通过 style.ts 引入alifd/next/lib/number-picker/style并通过formily/next的 src/index.ts 统一对外导出。二、三种接入方式完整示例Formily 支持三种形态书写同一个表单下面三个示例完全等价均实现一个宽度 240 的必填数字输入框并配套提交按钮。2.1 Markup Schema 方式JSX 语法糖Markup Schema 用 JSX 标签直接描述 Schema可读性最好、最接近普通 JSX 开发习惯import React from react import { NumberPicker, FormItem, FormButtonGroup, Submit } from formily/next import { createForm } from formily/core import { FormProvider, createSchemaField } from formily/react const SchemaField createSchemaField({ components: { NumberPicker, FormItem, }, }) const form createForm() export default () ( FormProvider form{form} SchemaField SchemaField.String nameinput titleinput box x-decoratorFormItem x-componentNumberPicker required x-component-props{{ style: { width: 240, }, }} / /SchemaField FormButtonGroup Submit onSubmit{console.log}Submit/Submit /FormButtonGroup /FormProvider )要点说明createSchemaField注册的组件表中同时包含NumberPicker与FormItemx-decorator负责布局/校验信息展示x-component负责实际输入控件required声明必填配合FormItem会在未填写时展示校验错误x-component-props中的 props 会透传给 NumberPicker 底层组件此处传入style.width。2.2 JSON Schema 方式纯数据驱动JSON Schema 将描述与 UI 彻底解耦适合由后端下发或动态配置的场景写法与 Markup Schema 一一对应import React from react import { NumberPicker, FormItem, FormButtonGroup, Submit } from formily/next import { createForm } from formily/core import { FormProvider, createSchemaField } from formily/react const SchemaField createSchemaField({ components: { NumberPicker, FormItem, }, }) const form createForm() const schema { type: object, properties: { input: { type: string, title: input box, x-decorator: FormItem, x-component: NumberPicker, x-component-props: { style: { width: 240, }, }, }, }, } export default () ( FormProvider form{form} SchemaField schema{schema} / FormButtonGroup Submit onSubmit{console.log}Submit/Submit /FormButtonGroup /FormProvider )与 Markup Schema 的对应关系SchemaField.String nameinput等价于properties.inputx-decorator、x-component、x-component-props三个字段名在 JSON 中改为字符串键。注意此处 Schema 的type: string仅描述字段类型NumberPicker 实际输入/输出的仍是数字值。2.3 Pure JSX 方式不使用 Schema如果不使用 Schema 体系可以直接用formily/react的Field组件命令式声明import React from react import { NumberPicker, FormItem, FormButtonGroup, Submit } from formily/next import { createForm } from formily/core import { FormProvider, Field } from formily/react const form createForm() export default () ( FormProvider form{form} Field nameinput titleinput box required decorator{[FormItem]} component{[ NumberPicker, { style: { width: 240, }, }, ]} / FormButtonGroup Submit onSubmit{console.log}Submit/Submit /FormButtonGroup /FormProvider )三种方式的取舍建议方式特点适合场景Markup SchemaJSX 即 Schema类型提示友好前端直接书写表单的常规开发JSON Schema纯数据描述可序列化/动态下发低代码、配置化、服务端驱动表单Pure JSX跳过 Schema 解析直连 Field追求最小依赖、复杂联动逻辑无论哪种方式Submit onSubmit{console.log}都会在提交时把表单值含input字段打印到控制台可直接观察 NumberPicker 的取值结果。三、源码机制connect 如何让 Fusion 输入框接入 Formily 字段理解了用法后有必要看一下connect的底层机制这能解释为什么写一个 NumberPicker 标签就能自动拿到校验状态、尺寸和只读能力。connect定义在 packages/react/src/shared/connect.ts其核心实现为把传入的mapProps、mapReadPretty等映射器mapper依次作用于目标组件最终包装成一个React.forwardRef组件。其中两个关键映射器1.mapProps(mapSize, mapStatus)—— 状态与尺寸自动注入mapSizepackages/next/src/builtins/mapSize.ts读取FormLayout上下文中的size配置。若布局未指定 size则使用FormLayout的默认值源码中default会被归一化为 Fusion 的medium。这意味着只要在表单外层配置了FormLayout size所有 NumberPicker 都会自动跟随该尺寸无需逐个设置。mapStatuspackages/next/src/builtins/mapStatus.ts根据字段状态推导 Fusion 输入框的state属性——字段loading/validating时映射为loading存在selfErrors时映射为error存在selfWarnings时映射为warning否则回退到decoratorProps.feedbackStatus。这就是校验失败时输入框自动变红的原理。2.mapReadPretty(PreviewText.NumberPicker)—— 只读预览mapReadPretty逻辑同样在 connect.ts 中当字段pattern readPretty只读模式时不再渲染 Fusion 输入框而是渲染PreviewText.NumberPicker。该组件定义在 packages/next/src/preview-text/index.tsx实现为const NumberPicker: React.FCReact.PropsWithChildrenNumberPickerProps ( props ) { return NextNumberPicker {...props} isPreview / }它复用了 Fusion NumberPicker 的isPreview能力将数字值以纯文本形式展示。这意味着当表单进入详情/查看模式如form.setPattern(readPretty)时NumberPicker 会自动从可输入态切换为纯文本回显无需任何额外代码。四、常用配置参数APINumberPicker 的完整 API 对齐 Fusion Design 的数字输入框可通过x-component-propsSchema 方式或组件 propsJSX 方式传入。以下为最常用的配置项参数类型默认值说明valuenumber-当前值由 Formily 字段自动注入一般无需手动传defaultValuenumber-非受控模式下的初始值onChange(value: number) void-值变化回调Formily 会自动接管该事件写入字段minnumber-允许的最小值maxnumber-允许的最大值stepnumber1步长点击步进器时每次增减的值precisionnumber-小数精度保留的小数位数sizelarge \| medium \| small跟随 FormLayout输入框尺寸disabledbooleanfalse禁用输入styleCSSProperties-内联样式如宽度典型配置示例限制 0100、步长 5、保留整数SchemaField.String namescore title评分 x-componentNumberPicker required x-component-props{{ min: 0, max: 100, step: 5, precision: 0, style: { width: 200 }, }} /注意size参数通常无需手动指定——如源码所示NumberPicker 会从FormLayout上下文自动继承手动传入的size优先级更高props.size || takeSize()。同样的stateloading/error/warning也由mapStatus根据字段校验结果自动推导。五、与 FormItem 的协作在 Formily 体系中 NumberPicker 必须搭配FormItem作为x-decorator才能获得完整的表单能力校验反馈required、validator等校验结果通过mapStatus映射为 Fusion 输入框的error/warning状态同时FormItem负责渲染错误文案布局控制FormItem负责 label、帮助文案、错误信息的排版style.width等样式配置作用于输入框本身只读切换FormItem与mapReadPretty协同在readPretty模式下将整个字段切换为纯文本展示。因此三处示例中的components: { NumberPicker, FormItem }注册缺一不可——FormItem由x-decoratorFormItem引用NumberPicker由x-componentNumberPicker引用。六、环境与依赖前提使用formily/next的 NumberPicker 需要满足以下前提依据 packages/next/package.jsonpeerDependenciesalifd/next^1.19.0、react/react-dom/react-is16.8.0Hook 版本要求依赖包formily/core、formily/react、formily/reactive、formily/json-schema等均为同版本 2.3.7样式组件样式通过 style.ts 引入alifd/next/lib/number-picker/style构建时由create-style/build-style脚本处理。安装后即可按上文三种方式使用若只需展示数字而不希望用户编辑可配合FormLayout的只读模式或直接使用PreviewText组件。七、小结NumberPicker 是 Formily Next 表单体系中麻雀虽小、五脏俱全的典型组件使用层面它支持 Markup Schema、JSON Schema、Pure JSX 三种等价写法机制层面connectmapProps(mapSize, mapStatus)mapReadPretty(PreviewText.NumberPicker)的组合让它在零配置下自动获得尺寸跟随、校验状态反馈与只读预览能力。掌握这一个组件即可举一反三地理解formily/next中其余所有 Schema 组件的封装模式。赞分享前端UI组件【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址https://gitcode.com/gh_mirrors/fo/formily点击查看免费下载相关推荐Formily 组件实战formily/antd NumberPicker 数字输入框的三种 Schema 用法与源码原理Formily 组件实战formily/antd NumberPicker 数字输入框的三种 Schema 用法与源码原理 本文以 Formily 官方文档前端UI组件Formily 数字输入框formily/antd NumberPicker完全指南三种 Schema 用法与源码原理解析Formily 数字输入框formily/antd NumberPicker完全指南三种 Schema 用法与源码原理解析 数字输入框NumberPi前端UI组件Formily Next 密码输入框Password组件实战checkStrength 密码强度校验与三种 Schema 用法Formily Next 密码输入框Password组件实战checkStrength 密码强度校验与三种 Schema 用法 本文基于 formily前端UI组件上一篇告别Lua代码隐患xLua单元测试框架实战指南下一篇React DevTools单元测试指南确保扩展功能稳定性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考