Reactjs 基于表单值的Formik条件验证

我的身体有点复杂。根据我发出的HTTP请求的类型，它有3种基本类型（POST\u用户、PUT\u用户、PUT\u密码）。除此之外，对于（POST_USER），我需要选择要创建的用户类型。介于（基本和非基本）之间

我正在使用

React

、

Formik

和

Yup

进行验证。基于HTTP_请求的验证工作正常

问题是我想基于表单值进行检查，而我使用的

Formik

中的

ValidationSchema

没有将它们作为道具传递。因此，我无法将参数传递给正在传递给

ValidationSchema

的验证函数。这是我正在使用的函数，用于validationSchema

export const VALIDATION_RULES = (execMode: executionMode): any => {
  switch (execMode) {
    case executionMode.PUT_USER:
      return Yup.object().shape({
        username: Yup.string()
          .trim()
          .required('Name is required'),
        email: Yup.string()
          .email()
          .nullable(),
        groups: Yup.array().required('Group is required')
      });
    case executionMode.PUT_PASSWORD:
      return Yup.object().shape({
        password: Yup.string()
          .trim()
          .required('Password is required'),
        confirmPassword: Yup.string()
          .trim()
          .required('Password confirmation is required')
          .oneOf([Yup.ref('password')], 'Passwords do not match')
      });
    default:
      return Yup.object().shape({
        type: Yup.mixed()
          .oneOf([AuthenticationType.BASIC, AuthenticationType.NON_BASIC])
          .required('Authentication Type is required'),
        username: Yup.string()
          .trim()
          .required('Name is required'),
        email: Yup.string()
          .email()
          .nullable(),
        password: Yup.string()
          .trim()
          .required('Password is required'),
        confirmPassword: Yup.string()
          .trim()
          .required('Password confirmation is required')
          .oneOf([Yup.ref('password')], 'Passwords do not match'),
        groups: Yup.array().required('Group is required')
      });
  }
};

executionMode是一个简单的枚举。我在上述功能以及组件itslef中使用它：

enum executionMode {
  POST_USER = 'POST_USER',
  PUT_USER = 'PUT_USER',
  PUT_PASSWORD = 'PUT_PASSWORD'
}

export default executionMode;

这是我的组件，我在其中调用

Formik

本身：

      <Formik
        initialValues={this.getDefaultValues(Mode)}
        validationSchema={VALIDATION_RULES(Mode)}
        onSubmit={this.handleSubmit}
        render={({ isSubmitting, values, status }) => (
          <Form>
            ..Form Related Code. Doesn't have anything to do with validation
          </Form>
        )}
      />

(
…表单相关代码。与验证无关
)}
/>

问题： 上述代码中描述的验证在除非基本POST_用户表单之外的所有场景中都能完美工作。这里的问题是，它不允许我创建用户，因为在validationSchema本身中，密码和ConfirmPassword的验证仍然存在

可能的解决办法： 1.我尝试使用来自Formik的

validate

，它将值作为道具传递，但是需要重新编写将错误映射到值的逻辑，这让我非常失望。除此之外，还有一些我需要创建的自定义代码，比如处理错误onChange和onBlur，这两个代码validateSchema本身就可以完美地处理。 2.我还试着使用来自yup的

时的
。它不起作用。它通过验证，提交表单，并返回服务器错误

如果你能帮忙，我将非常感激。请不要将此标记为重复。它不像在
时使用
那么简单，而且关于如何使用
验证
以及如何处理错误映射和事件更改的在线文档非常有限。谢谢您的时间。
想一想。。。有3种不同的模式，有3组不同的字段。在你的情况下，最好写3种不同的形式，每种模式一种？在本例中，每个用例都有单独的验证模式。即使我这样做了，创建自的
when
的情况仍然存在。另外，我需要测试2个不同的组件。对，打3个电话的代码相同。为每个不同的表单连接Redux。我明白你的意思，我很难做出这个决定，但我相信，对于我的设置来说，这是一个更好的解决方案。非常感谢。如果我理解正确的话，
when
案例就是给您带来问题的原因。如果你通过4种模式来“消除”它呢。将
POST\u USER
模式分为
POST\u USER\u BASIC
和
POST\u USER\u NON\u BASIC
，并有4个验证模式。对你有用吗？