如何使用多个验证架构并呈现窗体的拆分视图
我知道这可能是一个单一的问题，甚至是二分之一的问题，但请相信我，当我说这两个问题不能单独回答。请记住这一点。谢谢你抽出时间..。
我的问题围绕着我目前面临的一个特殊情况。我正在使用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问题上。谢谢你！！
回答 1
Stack Overflow用户
发布于 2020-08-05 06:41:03
您应该只创建一个formik表单。从调用表单组件的位置开始，将操作作为创建的1和编辑的2传递为1。从道具，如果你得到2，不要显示密码组件。休息是可见的。使用相同的验证架构，为密码提供一些静态值，并在编辑时确认密码，这样模式就可以提交表单。只需更改请求体，分别用于创建和编辑。
https://stackoverflow.com/questions/55405881
复制相似问题
腾讯云开发者
