reactjs - 无法使用 Formik 设置 `isSubmitting`

Question

编辑

事实证明，它一直在工作——问题是因为我的 handleLogin方法是 async

新沙箱:

---

我有一个基本的表单组件。它通过 setSubmitting作为可用方法之一，它通过了 isSubmitting以及。我想在提交表单时禁用提交按钮，但我遇到了麻烦。

最初，我有一个 <form>元素，我试图设置 setSubmitting(true)在下面的部分:

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

但这没有用。所以我尝试摆脱 <form>和改变<Button>至 type="button"而不是 submit ，我做到了，

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

但这样做的问题是，为了做到 setSubmitting(false)如果出现错误，我必须这样做，

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

除此之外，我对onSubmit={handleLogin}没用，但如果我删除它，Typescript 会提示。

必须有一种更简单的方法来完成此操作(无需使用 useFormik )。

我可以在这里做什么？

这是组件:

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

您忘记将 form 放入您的 Formik 组件中

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

现在您可以将按钮用作提交。

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