如果您想submit在表单加载时最初禁用按钮，您可以使用以下内容的dirty : boolean属性Formik：

disabled={!formik.dirty}

如果您想在submit所有字段值都有效之前保持按钮禁用，那么您可以使用isValid: boolean它的工作方式如下：

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

所以你可以将它用作：

disabled={!formik.isValid}

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

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

要最初禁用按钮，只需检查触摸对象是否为空并保持这种方式，直到所有字段都通过验证 !isValid

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

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

我建议首先将初始值删除为常量。然后你需要访问formik的错误对象。我没有使用新的钩子语法来完成这个，但是，查看我希望“formik.errors”工作的文档（这在 formProps.errors 中使用渲染props公开）。最后，禁用提交按钮应该检查 formik.values 是否等于初始值或错误对象不为空。

您可以添加validateOnMount并将其设置为 true

const formik = useFormik({
    initialValues: {
      validateOnMount: true, // <================= Add this
      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}