Reactjs React-formik表单验证：如何最初禁用提交按钮

下面是我使用的

React

表单验证代码

formik

。默认情况下，在加载表单时，我希望保持“提交”按钮处于禁用状态：

import { useFormik } from "formik";
import * as Yup from "yup";

const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: ""
    },
    validationSchema: Yup.object({
      firstName: Yup.string()
        .max(15, "Must be 15 characters or less")
        .min(3, "Must be at least 3 characters")
        .required("Required"),
      lastName: Yup.string()
        .min(3, "Must be at least 3 characters")
        .max(20, "Must be 20 characters or less")
        .required("Required"),
      email: Yup.string()
        .email("Invalid email address")
        .required("Required")
    }),
    onSubmit: values => {
      handleSubmit(values);
    }
  });

我尝试在我的按钮上使用此选项：

 disabled={!formik.isValid}

---

但只有当我尝试提交表单时，它才真正起作用。因此，如果我将表单留空并点击submit，则会显示所有验证错误，然后该按钮将被禁用。但是，应该从一开始就禁用它。我检查了，但没有看到任何明显的内容。

Formik跟踪字段值和错误，但会将它们公开给您使用，这过去是通过formProps使用render props模式完成的，但现在似乎是useFormik钩子返回的Formik变量的一部分

---

我建议首先将初始值移除为常量。然后需要访问formik的错误对象。我没有使用新的钩子语法来实现这一点，但是，在查看文档时，我希望“formik.errors”能够正常工作（这在formProps.errors使用render props中公开）。最后，禁用提交按钮应该是检查formik.values是否等于初始值，或者errors对象是否为空。

如果要在表单加载时初始禁用

提交
按钮，可以使用
formik
的use属性，如下所示：

disabled={!formik.dirty}

disabled={!(formik.isValid && formik.dirty)}

如果要在所有字段值有效之前禁用
submit
按钮，则可以使用如下操作：

disabled={!formik.dirty}

disabled={!(formik.isValid && formik.dirty)}

如果没有错误（即错误对象为空），则返回true，否则返回false

因此，您可以将其用作：

disabled={!formik.isValid}

现在，如果希望在所有字段都有效之前禁用提交按钮，并且如果字段值已从初始值更改，则必须结合使用上述两个属性，如下所示：

disabled={!formik.dirty}

disabled={!(formik.isValid && formik.dirty)}

要使按钮最初处于禁用状态，只需检查触摸对象是否为空，并保持此状态，直到所有字段都通过
验证！是否有效

disabled={!isValid || (Object.keys(touched).length === 0 && touched.constructor === Object)}

谢谢，这几乎有效，但不完全有效。当页面首次加载时，按钮被禁用。但是，只要一个文本字段正确，按钮就会启用。只有在正确填写所有字段后，才会出现这种情况。我已编辑了我的答案，并添加了一些更有用的代码。请让我知道这是否可行，请考虑接受我的答案，如果它帮助了你：如果有一些初始值是有效的，按钮将永远不会被启用。正如SashaOmelchenko指出的，这不验证初始值。将
validateOnMount
与
isValid
一起使用。看见