如何在formik中禁用提交表单上的按钮？答案

【问题标题】：How to disable button on submit form in formik?如何在formik中禁用提交表单上的按钮？
【发布时间】：2020-03-04 12:12:37
【问题描述】：

我的反应组件中有一个带有handleSubmit 的表单。我需要做的是，当我提交表单（点击保存）时，保存按钮会自动被禁用，当我收到响应时，它会自动启用。

  handleSubmit = async({ company, email }, { setSubmitting, setErrors }) => {
    setSubmitting(true)
    const { value: { status, message } } = await this.props.createCompany({ name: company, email })
    if (status) {
      this.fetchCompanies()
      this.closeModal()
    } else {
      setErrors({ email: message })
    }
  }

    <Formik
      initialValues={loginDetails}
      validationSchema={loginSchema}
      onSubmit={(values, formikProps) => this.handleSubmit(values, formikProps)}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting
      }) => (
        <form onSubmit={handleSubmit}>
          <div className="col-md-12">
            <div className="form-group material-textfield">
              <input type="text" name="email" value={values.email} onChange={handleChange} className="form-control material-textfield-input"/>
              <ErrorMessage component="span" name="email" className="invalid-feedback d-block"/>
              <label className="material-textfield-label">Email<span>*</span></label>
            </div>
          </div>
        <button type="submit" className="btn btn-dark btn-lg w-100" disabled={isSubmitting}>Save</button>
        </form>
      )}
    </Formik>

为此，我使用了来自 formik 的 setSubmitting 函数。但它不起作用。

请帮忙。

【问题讨论】：

标签： reactjs formik

【解决方案1】：

这应该会有所帮助：

const onSubmitHandler = (values, formik) => {
        persistYourData(values).then(r => {
            formik.setSubmitting(false);            
        }).catch(error => console.log(error));
    }
...
<Button variant="contained" color={"primary"} onClick={pr.handleSubmit} disabled={ ((!(pr.isValid && pr.dirty)) || pr.isSubmitting) }>Submit</Button>

【讨论】：

【解决方案2】：

#You can disable the button with **formik.isSubmitting** or **formik.errors** #

<Formik
                initialValues={{
                    email: '',
                    password: '',
                }}
                validationSchema={Yup.object({
                    email: Yup.string().email('Invalid email address').required('Required'),
                    password: Yup.string().required('Required'),
                })}
                onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2));
                        setSubmitting(false);
                    });
                }}
            >
                {(formik) => (
                    <Form>
                        <h1>Login</h1>
                        <Field type='email' name='email' />
                        <br />
                        <ErrorMessage name='email' />
                        <br />
                        <Field type='password' name='password' />
                        <br />
                        <ErrorMessage name='password' />
                        <br />
                        <button disabled={formik.isSubmitting || formik.errors}>Login</button>
                    </Form>
                )}
            </Formik>

【讨论】：