使用 Formik 禁用表单提交按钮

Formik 是一个流行的 React 表单处理库。它允许开发人员轻松地处理表单验证、值管理和提交。

默认情况下，Formik 不会禁用表单提交按钮。但是，我们可能会遇到一些情况需要规定当表单不符合要求时，禁用提交按钮。

在本文中，我们将看看如何在 Formik 中禁用提交按钮。

示例代码

以下是一个简单的例子，演示了如何使用 Formik 禁用提交按钮。

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";

const initialValues = {
  name: "",
  email: "",
};

const onSubmit = (values, { setSubmitting }) => {
  setTimeout(() => {
    alert(JSON.stringify(values, null, 2));
    setSubmitting(false);
  }, 400);
};

const validate = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = "Required";
  }
  if (!values.email) {
    errors.email = "Required";
  }
  return errors;
};

const App = () => (
  <div>
    <h1>Formik Submit Button Disable Example</h1>
    <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validate={validate}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="name" />
          <ErrorMessage name="name" component="div" />
          <Field type="text" name="email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  </div>
);

export default App;

在此示例中，当用户尝试提交一个没有完全填写的表单时，将禁用提交按钮。在这种情况下，用户将无法单击按钮，直到表单的所有必填字段均已输入。

更多关于 Formik 的信息

Formik 是一个强大的库，可以帮助开发人员更轻松地处理表单验证和提交。本文提供了一个简单的示例，演示了如何在 Formik 中禁用提交按钮。要了解有关 Formik 的更多信息，请访问其官方文档。

参考

• Formik 官方网站
• CodeSandbox 示例代码