react formik 禁用具有表单有效性的提交按钮

Question

我正在为我的 React 项目使用 formik 库。当必填字段为空或有任何错误时，我需要最初禁用提交按钮。我使用以下代码检查了表单状态。

const formik = useFormik(false);

        <Formik
        initialValues={!location.state ? InvoiceInitalValues : location.state}
        validationSchema={POValidation} innerRef={formRef}
        onSubmit={(form, actions, formikHelper) => {
          console.log(form);
          console.log(formRef);
          setTimeout(() => {
            saveInvoice(form, actions, formikHelper);
            actions.setSubmitting(false);
          }, 1000);
        }}
      >
        {({
          handleSubmit,
          handleChange,
          setFieldValue,
          values,
          handleReset,
          errors,
          resetForm, isSubmitting


        })

我使用控制台记录表单状态，但表单始终是 'isValid: True'。请检查下图。

我也在 html 中打印了它。但总是 isValid 为 True。我需要这个来禁用我的按钮

打印状态

 <p> {formik.isValid=== true ? "True" : "False"} </p>

我试过下面的代码来禁用我的按钮

<Button className="btn btn-primary mr-1" type="submit" disabled={!formik.isValid}>

提交

为什么 formik 表单有效性始终为真，甚至必填字段为空。我花了更多时间来解决这个问题。仍然无法解决这个问题。任何人都知道解决这个问题

Answer 1

您使用 Formik component, but you are checking isValid on another formik instance created through useFormik 挂钩创建了表单。不对。

您应该使用 <Formik> 或 useFormik。

因为您已经使用 Formik 组件编写了代码。以下是您如何访问 isValid 属性:

<Formik
  initialValues={!location.state ? InvoiceInitalValues : location.state}
  // ...
>
  {({
    values,
    handleChange,
    // ... 
    isValid // HERE
  }) => (
    <form onSubmit={handleSubmit}>
      <input
...

这里是codesandbox.

react formik 禁用具有表单有效性的提交按钮

react formik disable submit button with form validity

reactjs

formik