用途:在 React 中使用 Formik 创建表单、处理 validation、改造 MUI 组件以适配 Formik,以及处理表单提交相关问题。
主要能力与规范:所有带提交的表单必须使用 Formik;必须声明并导出表单值的 type;从 API 获取初始值时必须设置 enableReinitialize: true;校验逻辑较长时可抽成外部 validate 函数;自定义 Formik 组件需放在 src/app/modules/components 作为共享组件。
使用方式:先定义并导出 SimpleFormValues 类型,再用 react-query 等获取初始值,随后通过 useFormik 配置 initialValues(API 数据用 user || initialValues)、enableReinitialize、validate 和 onSubmit,最后用 FormikTextField 等组件渲染,按钮调用 formik.handleSubmit() 与 formik.handleReset()。自定义组件接收 name 与 formik(FormikProps<T>),通过 formik.getFieldProps(name) 取值、formik.getFieldMeta(name) 获取 touched 与 error,并在 TextField 上设置 name 和 id 以便 Robot 定位,onChange 用 formik.setFieldValue。
模板已提供 FormikTextField、ProvinceSelect、EmployeeAutoComplete、InterestCheckboxGroup、GenderRadioGroup,可查看 src/app/modules/_common/components/CustomFormik。
限制:资料未说明具体安装命令、依赖版本、测试方式及适用平台等信息。