javascript - 在调用验证之前给 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 .