我正在尝试使用 Yup 进行条件表单验证，但无法更改值“showfile”的值

问题描述

我正在使用 formik 和 Yup 来处理 react 中的表单数据和表单验证。我正在尝试将“Showfile”的值更改为 true 以进行条件验证但值未更改。

                             

                                    
                                    TextField
                                    label="Resume"
                                    star="*"
                                    color="red"
                                    name="file"
                                    type="file"
                                    accept=".pdf,.docx,.doc "
                                    onChange={(event) =>
                                        formik.setFieldValue(
                                            "file",event.currentTarget.files[0],"showfile",true
                                        )
                                    }
                                    value={formik.value}
                                />
                                

file: Yup.mixed().when("showfile",{
            is: true,then: Yup.mixed()
                .required("required")
                .test(
                    "FILE_SIZE","Uploaded file is too big.",(value) => value && value.size  value && SUPPORTED_FORMATS.includes(value.type)
                ),

Formik
            initialValues={{
                UserName: "",email: "",Phone: "",message: "",file: "",showfile: false,submit: false,}}
            validationSchema={validate}
            onSubmit={(values,actions) => {
                setTimeout(() => {
                    console.log(values);
                    actions.setSubmitting(false);
                },1000);
            }}
        >

解决方法

您使用 setFieldValue 的方式错误。它只更新一个字段。如果你想设置 2 归档，你需要调用 setFieldValue 2 次：

onChange={(event) => {
    formik.setFieldValue("file",event.currentTarget.files[0]);
    formik.setFieldValue("showfile",true);
}}

您可以在此处阅读有关 setFieldValue 的更多信息：https://formik.org/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean--void