Formik 验证页面加载时的初始值

Question

下面的代码在提交和文本框的 onFocusOut 时进行验证，我希望它首先使用初始值重新加载页面来触发验证。

\n

尝试过validateOnMount，以及其他但没有成功。

\n

这里缺少什么？

\n

const RoleValidationSchema = Yup.object().shape({\n    Adi: Yup.string()\n        .min(2, "En az 2 karakter olmal\xc4\xb1d\xc4\xb1r")\n        .max(30, "En fazla 30 karakter olmal\xc4\xb1d\xc4\xb1r")\n        .required("Gerekli!")\n})\n\n\nconst Role = (props) => {\n    return (\n        <div>\n            <Formik\n                onSubmit={(values, { validate }) => {\n                    debugger\n                    validate(values);\n                    alert("Submietted!")\n                    props.handleFormSubmit()\n                }}\n                initialValues={{\n                    Adi: "d"\n                }}\n                validationSchema={RoleValidationSchema}\n                validateOnMount={true}\n                validateOnChange={true}\n                validateOnBlur={true}\n                render={({ errors, touched, setFieldValue, ...rest }) => {\n                    debugger\n                    return (\n                        <Form>\n                            <Row>\n                                <Col sm="12">\n                                    <Label for="Adi">Rol Adi</Label>\n                                    <FormGroup className="position-relative">\n                                        <Field\n                                            autoComplete="off"\n                                            id="Adi"\n                                            className="form-control"\n                                            name="Adi"\n                                            type="text"\n                                        />\n                                        <ErrorMessage name="Adi">\n                                            {(msg) => (\n                                                <div className="field-error text-danger">{msg}</div>\n                                            )}\n                                        </ErrorMessage>\n                                    </FormGroup>\n\n                                </Col>\n                                <Tree dataSource={treeData} targetKeys={targetKeys} expandKeys={[]} onChange={onChange} />\n                            </Row>\n                            <button type="submit" className="btn btn-success" > Kaydet</button>\n                        </Form>\n                    )\n                }}\n            />\n\n        </div>\n    )\n}\n

\n

Answer 1

尝试将enableReinitialize Prop添加到您的Formik组件中

<Formik
   enableReinitialize
   ......
/>