在调用验证之前给 Formik 初始错误值

Question

我有以下表格：

const MyForm = () => {
    return (
        <>
            <Formik
                validateOnChange={true}
                initialValues={{ plan: "", email: "", name: "" }}
                validate={values => {
                    console.log(values)
                    const errors = {}
                    if (values.plan !== "123" && values.plan !== "456") {
                        errors.plan = "Not valid"
                    } else if (values.plan === "") {
                        errors.plan = "Please enter something"
                    }
                    if (!values.email) {
                        errors.email = "Please provide an e-mail address."
                    } else if (
                        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
                    ) {
                        errors.email = "Please provide a valid e-mail address."
                    }
                    return errors
                }}
                onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        setSubmitting(false)
                    }, 400)
                }}
            >
                {({ isSubmitting, errors }) => (
                    <Form>
                        <FieldWrapper>
                            <InputField type="text" name="plan" label="plan" />
                            <StyledErrorMessage name="plan" component="div" />
                        </FieldWrapper>
                        <Button
                            disabled={errors.plan}
                        >
                            Continue
            </Button>
                    </Form>
                )}
            </Formik>
        </>
    )
}

我有一个 Continue 按钮，我希望它在出现任何错误时被禁用。我正在做 <Button disabled={errors.plan}> 并且这有效。

但是：它不会禁用按钮 当用户根本不触摸该字段时 - 从那时起，不会调用验证，因此，不会' 是错误对象中的任何错误。所以最初，按钮没有被禁用。

我该如何避免这种情况？

Answer 1

我对 Formik 不是很熟悉，但是您能为表单的完成状态添加一个状态吗，该状态最初设置为 false，完成后设置为 setState(true)。那么 <Button> 的条件可以同时检查 errors.plan && completedState.

在调用验证之前给 Formik 初始错误值

Give Formik Initial Error Values, Before Validation is Called

javascript

forms

validation

reactjs

formik