# 福米克模式 ## 基本表单设置从 'formik' 导入 { useFormik }；从 'yup' 导入 * as yup； constvalidationSchema = yup.object({ email: yup.string().email('无效的邮箱').required('邮箱为必填项'), 密码: yup.string().min(8, '最少 8 个字符').required('需要密码'), }); const 登录表单 = () => { const formik = useFormik({ 初始值：{ 电子邮件：''，密码: '', }, 验证模式， onSubmit：异步（值）=> { 等待登录突变（{变量：{输入：值}}）； }, }); 返回（ <输入标签=“电子邮件” 值={formik.values.email} onChangeText={formik.handleChange('email')} onBlur={formik.handleBlur('电子邮件')} 错误={formik.touched.email？ formik.errors.email : 未定义} 键盘类型=“电子邮件地址” 自动大写=“无” /> <输入标签=“密码” 值={formik.values.password} onChangeText={formik.handleChange('密码')} onBlur={formik.handleBlur('密码')} 错误={formik.touched.密码？ formik.errors.password : 未定义} 安全文本输入 /> <按钮 onPress={formik.handleSubmit} isDisabled={!formik.isValid || formik.is正在提交} isLoading={formik.isSubmitting} > 登录）； }; ## 验证模式 ### 常见模式从 'yup' 导入 * as yup； // 电子邮件电子邮件： yup.string() .email('无效的电子邮件地址') .required('电子邮件为必填项') // 密码有要求密码：yup.string() .min(8, '必须至少8个字符') .matches(/[a-z]/, '必须包含小写字母') .matches(/[A-Z]/, '必须包含大写字母') .matches(/[0-9]/, '必须包含数字') .required('需要密码') // 确认密码确认密码： yup.string() .oneOf([yup.ref('密码')], '密码必须匹配') .required('请确认密码') // 电话号码电话： yup.string() .matches(/^\+?[1-9]\d{1,14}$/, '电话号码无效') .required('需要手机') // 存在时进行验证的可选字段网站：yup.string() .url('必须是有效的 URL') .nullable() // 有范围的数字数量： yup.number() .min(1, '最小 1') .max(100, '最大 100') .required('所需数量') // 具有最少项的数组标签： yup.array() .of(yup.string()) .min(1, '选择至少一个标签') ### 条件验证 const schema = yup.object({ hasCompany: yup.boolean(), 公司名称： yup.string().when('hasCompany', { 是：真实， then: (schema) => schema.required('需要公司名称'), 否则： (schema) => schema.nullable(), }), }); ## 表单字段助手 ### 输入助手 const getFieldProps = (name: keyof typeof formik.values) => ({ 值：formik.values[名称]， onChangeText: formik.handleChange(name), onBlur: formik.handleBlur(name), 错误：formik.touched[名称]？ formik.errors[名称] ：未定义， }); // 用法 ### 选择/选择器助手 <选择标签=“国家/地区” 值={formik.values.country} onValueChange={(value) => formik.setFieldValue('国家', value)} 错误={formik.touched.country？ formik.errors.country：未定义} 选项={国家选项} /> ## 使用 GraphQL 提交表单 const CreateItemForm = () => { const [createItem] = useCreateItemMutation({ onCompleted: () => { toast.success({ title: '项目已创建' }); 导航.goBack(); }, onError: (错误) => { console.error('创建项目失败：', error); toast.error({ title: '创建项目失败' }); }, }); const formik = useFormik({ 初始值: { 名称: '', 描述: '' }, 验证模式， onSubmit: async (values, { setSubmitting }) => { 尝试{ 等待createItem({ 变量: { 输入: 值 } }); }最后{ setSubmitting(假); } }, }); 返回（ {/* 表单字段 */} <按钮 onPress={formik.handleSubmit} isDisabled={!formik.isValid || formik.is正在提交} isLoading={formik.isSubmitting} > 创建）； }; ## 编辑带有初始值的表单 const EditItemForm = ({ item }: { item: Item }) => { const [updateItem] = useUpdateItemMutation({ onCompleted: () => toast.success({ title: '已保存' }), onError: (错误) => { console.error('updateItem 失败:', error); toast.error({ title: '保存失败' }); }, }); const formik = useFormik({ 初始值：{ 名称：项目.名称，描述：项目.描述?? '', }, enableReinitialize: true, // 当 item 属性改变时更新验证模式， onSubmit：异步（值）=> { 等待更新项目（{ 变量：{ id：item.id，输入：值}， }); }, }); // 跟踪表单是否发生变化 const hasChanges = formik.dirty; 返回（ {/* 表单字段 */} <按钮 onPress={formik.handleSubmit} isDisabled={!hasChanges || !formik.isValid || formik.is正在提交} isLoading={formik.isSubmitting} > 保存更改）； }; ## 形成状态助手常量{ value, // 当前表单值 error, // 验证错误 Touched, // 已被触摸的字段 isValid, // 表单通过验证 isSubmitting, // 正在提交 dirty, // 值与初始值不同 handleSubmit, // 提交处理程序 handleChange, // 更改处理程序 handleBlur, // 模糊处理程序 setFieldValue, // 设置单个字段 setFieldTouched, // 标记字段被触摸 resetForm, // 重置为初始值 setSubmitting, // 控制提交状态 } = 福米克； ## 多步骤表格 const MultiStepForm = () => { const [步骤，setStep] = useState(0); const formik = useFormik({ 初始值：{ // 步骤 1 名称：''，电子邮件：''， // 步骤 2 地址：''，城市: '', // 步骤 3 卡号: '', }, 验证模式：stepSchemas[步骤]， onSubmit：异步（值）=> { if (步骤 {step === 0 && } {step === 1 && } {step === 2 && } {步长 > 0 && ( <按钮变体=“大纲” onPress={() => setStep(step - 1)}> 返回 )} <按钮 onPress={formik.handleSubmit} isDisabled={!formik.isValid} isLoading={formik.isSubmitting} > {步骤 < 步骤.长度 - 1 ？ '下一步' : '提交'} ）； }; ## 反模式 // 错误 - 不显示验证错误 <输入值={formik.values.email} onChangeText={formik.handleChange('email')} /> // 正确 - 触摸时显示错误 <输入值={formik.values.email} onChangeText={formik.handleChange('email')} onBlur={formik.handleBlur('电子邮件')} 错误={formik.touched.email？ formik.errors.email : 未定义} /> // 错误 - 提交按钮始终启用 // 正确 - 无效或提交时禁用 <按钮 onPress={formik.handleSubmit} isDisabled={!formik.isValid || formik.is正在提交} isLoading={formik.isSubmitting} > 提交 // 错误 - 对突变没有错误处理 onSubmit：异步（值）=> { 等待createItem({ 变量: { 输入: 值 } }); } // 正确 - 处理错误 onSubmit: async (values, { setSubmitting }) => { 尝试{ 等待createItem({ 变量: { 输入: 值 } }); } 捕获（错误）{ toast.error({ title: '保存失败' }); }最后{ setSubmitting(假); } } ## 与其他技能的整合 * **graphql-schema** ：突变提交模式 * **react-ui-patterns** ：加载/错误状态 * **测试模式** ：测试表单验证和提交

福米克图案

包含技能