SuperAPI AI 工具集

formik-patterns

通用与其它

查看项目

更新于 10-15 17:34

技能介绍

用途:本技能面向使用 Formik 构建表单的场景,提供表单搭建、字段校验与提交处理的模式参考。适用时机为构建表单、实现校验逻辑或处理表单提交。

主要能力:基础表单使用 useFormik 配置 initialValues、validationSchema 与 onSubmit,并结合 Yup 定义校验规则。常见校验模式包括邮箱、密码复杂度、确认密码一致性、电话号码、可选 URL 字段、数值范围与数组最少项数。条件校验通过 yup.when 依据其他字段值动态决定是否必填。字段辅助函数封装 value、onChangeText、onBlur 与 error 等属性,减少重复代码;下拉选择通过 setFieldValue 更新值。

使用方式:提交时可对接 GraphQL mutation,使用 onCompleted 与 onError 处理成功与失败,并在 onSubmit 中通过 setSubmitting 控制提交状态。编辑表单可设置 enableReinitialize 以在 props 变化时同步初始值,并用 formik.dirty 判断是否有改动。多步表单按步骤切换 validationSchema,逐步推进并在最后提交。

适用场景:登录、创建、编辑及多步骤流程等表单交互,尤其适合 React Native 与 GraphQL 组合的项目。

限制:文档未提供具体安装命令、版本要求、平台支持范围与收费信息;示例代码中的组件(如 Input、Button、toast、navigation)来自外部环境,需自行准备。反模式部分提醒需在字段 touched 后展示校验错误,提交按钮应在无效或提交中禁用,并对 mutation 做错误处理;集成方面可与 graphql-schema、react-ui-patterns、testing-patterns 等技能配合。