无法使用 Formik 设置“isSubmitting”

Question

Edit

As it turns out, it was working all along -- the issue was because my handleLogin method was async

New sandbox:

---

I have a basic Form component. It passes setSubmitting as one of the available methods, and it passes isSubmitting as well. I want to disable the submit button while the form is submitting, but I'm having trouble with this.

Initially, I had a <form> element and I was trying to set setSubmitting(true) in the below part:

<form
     onSubmit={(credentials) => {
          setSubmitting(true); // <--
          handleSubmit(credentials);
     }}
>

But this didn't work. So I've tried getting rid of the <form> and changing <Button> to type="button" instead of submit , and I did,

<Button
  color="primary"
  disabled={isSubmitting}
  fullWidth
  size="large"
  type="button"
  variant="contained"
  onClick={() => {
    setSubmitting(true);
    handleLogin(values);
  }}
>
  Submit
</Button>

But the problem with this, is that in order to do setSubmitting(false) in case of an error is that I have to do this,

  onClick={() => {
    setSubmitting(true);
    handleLogin(values, setSubmitting); // <--
  }}

And in addition to this, I have no use for onSubmit={handleLogin} , but if I remove that, Typescript complains.

There's got to be an easier way to accomplish this (without using useFormik ).

What can I do here?

Here is the component:

import * as React from "react";
import { Formik } from "formik";

import { Box, Button, TextField } from "@material-ui/core";

const Form = React.memo(() => {
  const handleLogin = React.useCallback(async (credentials, setSubmitting) => {
    console.log(credentials);
    setTimeout(() => {
      setSubmitting(false);
    }, 2000);
  }, []);

  return (
    <Formik
      initialValues={{
        email: ""
      }}
      onSubmit={handleLogin} // removing this line make Typescript complain
    >
      {({
        handleSubmit,
        handleChange,
        setSubmitting,
        isSubmitting,
        values
      }) => (
        <div>
          <TextField
            fullWidth
            label="Email"
            margin="normal"
            name="email"
            onChange={handleChange}
            value={values.email}
            variant="outlined"
          />
          <Box sx={{ my: 2 }}>
            <Button
              color="primary"
              disabled={isSubmitting}
              fullWidth
              size="large"
              type="button"
              variant="contained"
              onClick={() => {
                setSubmitting(true);
                handleLogin(values, setSubmitting);
              }}
            >
              Submit
            </Button>
          </Box>
        </div>
      )}
    </Formik>
  );
});

export default Form;

Answer 1

You forget to put the form inside your Formik component

<Formik>
  {...}
  <form onSubmit={handleSubmit}>
    {...}
    <button type="submit" disabled={isSubmitting}>
      Submit
    </button>
  </form>
</Formik>

so now you can use your button as submit .

demo: https://stackblitz.com/edit/react-egp1gc?file=src%2FForm.js