reactjs - Formik 在页面加载时验证初始值

Question

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

尝试过validateOnMount，以及其他人，但没有奏效。

这里缺少什么？

const RoleValidationSchema = Yup.object().shape({
    Adi: Yup.string()
        .min(2, "En az 2 karakter olmalıdır")
        .max(30, "En fazla 30 karakter olmalıdır")
        .required("Gerekli!")
})


const Role = (props) => {
    return (
        <div>
            <Formik
                onSubmit={(values, { validate }) => {
                    debugger
                    validate(values);
                    alert("Submietted!")
                    props.handleFormSubmit()
                }}
                initialValues={{
                    Adi: "d"
                }}
                validationSchema={RoleValidationSchema}
                validateOnMount={true}
                validateOnChange={true}
                validateOnBlur={true}
                render={({ errors, touched, setFieldValue, ...rest }) => {
                    debugger
                    return (
                        <Form>
                            <Row>
                                <Col sm="12">
                                    <Label for="Adi">Rol Adi</Label>
                                    <FormGroup className="position-relative">
                                        <Field
                                            autoComplete="off"
                                            id="Adi"
                                            className="form-control"
                                            name="Adi"
                                            type="text"
                                        />
                                        <ErrorMessage name="Adi">
                                            {(msg) => (
                                                <div className="field-error text-danger">{msg}</div>
                                            )}
                                        </ErrorMessage>
                                    </FormGroup>

                                </Col>
                                <Tree dataSource={treeData} targetKeys={targetKeys} expandKeys={[]} onChange={onChange} />
                            </Row>
                            <button type="submit" className="btn btn-success" > Kaydet</button>
                        </Form>
                    )
                }}
            />

        </div>
    )
}

标签： reactjsformik

Answer 1

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

<Formik
   enableReinitialize
   ......
/>