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

Question

下面是我使用的 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}

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

原文由 user8463989 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您想在表单加载时保持 submit 按钮最初处于禁用状态，您可以使用 dirty : boolean 属性 Formik 如下所示：

 disabled={!formik.dirty}

如果您想保持 submit 按钮处于禁用状态，直到所有字段值都有效，那么您可以使用 isValid: boolean 它的工作原理如下：

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

因此，您可以将其用作：

 disabled={!formik.isValid}

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

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

原文由 Rahul Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要最初禁用按钮，只需检查触摸对象是否为空并保持这种状态，直到使用 !isValid 验证所有字段为止

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

原文由 kvba 发布，翻译遵循 CC BY-SA 4.0 许可协议