Formik中如何在Schema校验时获取当前表单值?(可使用Ref)
解决Formik v2 + Yup校验中访问其他字段值的问题
在Yup的test校验方法里,回调函数的第二个参数就是整个表单的values对象,不需要依赖Formik的ref来获取其他字段值。直接修改你的校验逻辑即可:
const SomeSchema = yup .object() .shape({ fieldA: yup.string(), fieldB: yup .number() .test( 'do-validation for fieldB', 'error message for fieldB if validation fails', (fieldB, context) => { // 通过context.parent获取整个表单的values const { fieldA } = context.parent; // 这里可以使用fieldA的值编写自定义校验逻辑 // 示例:若fieldA为空,则fieldB必须大于0 if (!fieldA) { return fieldB > 0; } return true; // 校验通过返回true,失败返回false }) })
为什么之前的ref方式在v2里不适用?
Formik v2中,ref属性不再直接暴露内部state,官方推荐的innerRef仅对内置表单组件生效,自定义字段场景下确实无法通过这种方式获取表单状态。而Yup本身的校验上下文已经提供了访问整个表单值的能力,这是更规范的实现方式,无需依赖Formik实例引用。
额外注意事项
- 确保Yup版本为最新,旧版本可能对
context参数的支持存在差异 - 校验函数返回
true表示校验通过,返回false或抛出错误都会触发设置的提示信息
内容的提问来源于stack exchange,提问作者Deepak Negi
相关产品推荐
相关产品推荐

