问如何使用多个验证架构并呈现窗体的拆分视图
EN

Stack Overflow用户

提问于 2019-03-28 11:54:31

回答 1查看 3.9K关注 0票数 1

我知道这可能是一个单一的问题，甚至是二分之一的问题，但请相信我，当我说这两个问题不能单独回答。请记住这一点。谢谢你抽出时间..。

我的问题围绕着我目前面临的一个特殊情况。我正在使用withFormik H.O.C和Yup一起处理我的表单中的各种案例，比如提交、errorHandling，以及更多(取决于具体情况)。

通常，我的表单情况涉及创建和编辑模式。

onCreate =>传递默认值并从我的服务调用POST方法。

onEdit =>使用来自服务器的当前项值填充值，并从服务调用PUT方法。

示例

  const validationSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
    password: Yup.string('Provide a Password').required('Password is required'),
    confirmPassword: Yup.string('Provide your password again')
      .required('Password Confirmation is Required')
      .oneOf([Yup.ref('password')], 'Passwords do not match'),
  });

  const EnchancedCreateUserForm = withFormik({
    mapPropsToValues: ({
      user = {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
      }
    }) => ({ ...user }),

    validationSchema,

    handleSubmit: (values, { props, setSubmitting }) => {
      const { doSubmit, onSave, inEditMode } = props;

      const saveUser = inEditMode ? updateUser : createUser;
      return doSubmit(saveUser, values)
        .then(() => {
          setSubmitting(false);
          onSave();
        })
        .catch(() => {
          setSubmitting(false);
        });
    },

    displayName: 'AddEditUser'
  })(AddEditUser);

这实际上对我很有用，因为我的Create和Edit表单是相同的。这是我的两个问题。

当前情况我目前的表单实现有两个视图。一个统一的在创建与这4个字段，和编辑，我有两个表单。一个用于passwordChange，另一个用于infoChange。这让我面临以下问题。

我需要3 FormValidationSchemas(创建，编辑-信息，编辑-密码)。我甚至不确定他是否支持。确切地说，我应该如何处理其余的功能，onSubmit，ErrorMessage，用于字段错误和statusError？如果你真的能帮我想出一种攻击的方法，那就太好了。

我读取了validationSchema可以传递一个返回validationSchema的函数，所以我这样做了，但是它不起作用：

  const validationFullSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
    password: Yup.string('Provide a Password').required('Password is required'),
    confirmPassword: Yup.string('Provide your password again')
      .required('Password Confirmation is Required')
      .oneOf([Yup.ref('password')], 'Passwords do not match'),
  });

  const validationEditSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
  });

 const validationSchemaFn = () => {
     If ( efitMode ) {
       return validationCreateSchema

}返回validationEditSchema }

  validationSchema: validationSchemaFn(),
  // Which throws an error
  // Failed to load app. Error: Cannot read property 'props' of undefined

我可能做错了什么，但我把它放在这里以防万一。

我对这件事的看法

创建2个表单组件(PasswordFormComponent，InfoFormComponent)，并使用H.O.C包装每个组件，允许它们独立地访问withFormik。
对于CreateForm，将其转换为容器组件，从而呈现这两个组件
对于Edit，不要调用当前正在发生的整个表单，而是为每种情况调用特定的组件。

你对我提出的解决方案有什么看法？如果您喜欢，可以让它更好，或者帮助一些代码示例，特别是在多个validationSchemas问题上。谢谢你！！

javascript