首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当Formik窗体isSubmitting时,如何向按钮添加类?

当Formik窗体isSubmitting时,可以通过在按钮上添加一个条件类来实现。可以使用React的条件渲染来实现这个功能。

首先,你需要在按钮的className属性中添加一个基本类,用于按钮的样式。然后,使用Formik的isSubmitting属性来判断是否正在提交表单。如果isSubmitting为true,表示表单正在提交,你可以在按钮的className属性中添加一个额外的类,用于表示正在提交的状态。

以下是一个示例代码:

代码语言:txt
复制
import { Formik, Form, Field, ErrorMessage } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="name" />
          <ErrorMessage name="name" component="div" />
          <button
            type="submit"
            className={`btn ${isSubmitting ? 'submitting' : ''}`}
            disabled={isSubmitting}
          >
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;

在上面的代码中,我们使用了Formik来创建一个简单的表单。当表单提交时,我们使用setTimeout模拟了一个异步请求,并在请求完成后将isSubmitting设置为false。

在按钮的className属性中,我们使用了模板字符串来动态添加类。如果isSubmitting为true,我们添加了一个名为"submitting"的类,用于表示正在提交的状态。你可以根据需要自定义这个类的样式。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券