formik-patterns

此技能为使用 Formik 和 Yup 的 React 项目提供了一套处理复杂表单状态、验证逻辑与异步提交的标准化框架。它专为需要实现稳健且用户友好表单的开发者设计，确保表单实现遵循一致的架构模式。通过运用此技能，开发者可以减少样板代码、确保类型安全，并在各种表单组件（包括登录画面、数据输入向导与管理仪表板）中保持可预测的行为。此技能涵盖了从基本设置、验证架构定义，到条件式验证与状态管理的进阶场景。

• 提供 Formik 与 Yup 集成的模板，包含电子邮件、密码、电话号码与数值范围限制等常用验证模式。

• 包含用于管理字段属性、触摸状态与错误消息的辅助工具，简化 UI 组件的集成流程。

• 实现异步表单提交的最佳实践，特别是在与 GraphQL Mutations 集成时，包含加载、成功与失败状态的追踪处理。

• 支持条件式验证逻辑，允许根据表单内其他字段的值动态调整字段的必填状态。

• 提供管理表单重置、字段初始化与重新初始化的技巧，适用于依赖外部数据属性的编辑页面。

• 确保表单提交具备良好的 UI 反馈，例如在处理期间禁用按钮并管理提交状态，以提供优质的用户体验。

• 当启动新的表单功能时，请使用此技能以确保你的实现符合验证与错误处理的存储库标准。

• 输入需求包含表单定义、数据架构与必要的 API 端点或 Mutation Hooks。

• 预期输出为整洁且易于维护的表单组件，能与现有的 UI 库和后端服务无缝集成。

• 请注意，此技能主要针对使用 Formik 库与 Yup 进行架构验证的 React 与 React Native 环境设计。

• 请务必使用 formik.dirty 来追踪变更，并确保在适当的情况下将 validationSchema 定义在组件渲染周期之外，以避免性能退化。

• 在实现复杂表单时，可将此技能与 graphql-schema 和 react-ui-patterns 结合使用，以进行全面的功能开发。