反应 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组件创建了表单，但您正在检查通过useFormikisValid挂钩创建的另一个 formik 实例。那是不对的。

您应该使用<Formik>或useFormik。

正如您使用 Formik 组件编写的代码一样。以下是访问isValid属性的方法：

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

这是一个codesandbox。