Formik 的“isSubmitting”何时设置回 False

JS

Formik是一个用于处理React表单的强大库，它简化了表单处理的过程。在Formik中，isSubmitting是一个布尔值，用于表示表单是否正在提交中。当表单开始提交时，isSubmitting会被设置为true，而当提交完成后，它会被设置回false。

使用Formik时，我们可以在表单的onSubmit回调函数中设置isSubmitting为true，以指示表单正在提交中。在提交完成后，我们可以手动将isSubmitting设置回false，以通知Formik表单提交已经完成。

下面是一个示例代码，展示了如何使用Formik的isSubmitting来控制表单提交状态：

JSx
import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
const MyForm = () => {
  const handleSubmit = (values, { setSubmitting }) => {
    // 模拟提交表单的异步操作
    setTimeout(() => {
      // 提交表单完成后，设置isSubmitting为false
      setSubmitting(false);
    }, 2000);
  };
  return (
    <Formik</p>      initialValues={{ name: "", emAIl: "" }}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <label htmlFor="name">姓名：</label>
            <Field type="text" name="name" />
            <ErrorMessage name="name" component="div" />
          </div>
          <div>
            <label htmlFor="emAIl">邮箱：</label>
            <Field type="emAIl" name="emAIl" />
            <ErrorMessage name="emAIl" component="div" />
          </div>
          <button type="submit" disabled={isSubmitting}>
            {isSubmitting ? "提交中..." : "提交"}
          </button>
        </Form>
      )}
    </Formik>
  );
};
export default MyForm;

在上面的代码中，我们定义了一个简单的表单，包含姓名和邮箱两个字段。在表单的onSubmit回调函数中，我们使用setSubmitting方法将isSubmitting设置回false，模拟了一个异步的表单提交操作。在提交按钮上，我们使用了isSubmitting来禁用按钮，并根据isSubmitting的值来显示不同的文本。

使用isSubmitting来禁用表单提交按钮

在上面的代码中，我们使用了Formik的isSubmitting来禁用表单提交按钮。当isSubmitting为true时，按钮会被禁用，用户无法重复提交表单。而当isSubmitting为false时，按钮将恢复可用状态，用户可以继续提交表单。

这种方式可以有效地防止用户在表单提交过程中进行多次重复提交，提升用户体验。

使用isSubmitting来显示提交状态

另一个常见的用途是使用isSubmitting来显示表单提交状态。在上面的代码中，我们通过在按钮上显示不同的文本来反映表单提交的状态。当isSubmitting为true时，按钮上显示"提交中..."，告诉用户表单正在提交中。而当isSubmitting为false时，按钮上显示"提交"，告诉用户可以继续提交表单。

这种方式可以让用户清楚地知道表单提交的状态，避免用户的不确定性。

Formik的isSubmitting可以帮助我们更好地控制和处理表单的提交状态。我们可以根据isSubmitting的值来禁用提交按钮或显示提交状态，提升用户体验。