You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.20 21:45:26