首页
学习
活动
专区
工具
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"的类,用于表示正在提交的状态。你可以根据需要自定义这个类的样式。

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

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

相关·内容

2023 React 生态系统,以及我的一些吐槽……

应该是用 GraphQL 时的状态管理最佳选择。 表单处理 Formik 面对现实吧,在 React 中处理表单确实很冗长。...我(@jaredpalmer)在与 @eonwhite 一起构建一个大型内部管理仪表板时编写了 Formik。...格式化流水线、解析流水线、内置验证,根据状态向元素添加和移除类名...这一切都很棒! 直到你需要做一些不符合 AngularJS 设计思路的事情。...我之前使用过 Formik,但成果并不太理想。对于普通的表单来说,它表现得很好,但在多步骤表单方面有些困难。虽然后来他们添加了“向导”表单,但使用起来并不太直观。...此外,Formik 依赖于表单元素,并且在控制 Redux 存储时存在一些挑战。

78430

C#学习笔记—— 常用控件说明及其属性、事件

(12)AcceptButton 属性:该属性用来获取或设置一个值,该值是一个按钮的名称,当按 Enter 键时就相当于单击了窗体上的该按钮。...(13)CancelButton 属性:该属性用来获取或设置一个值,该值是一个按钮的名称,当按 Esc 键时就相当于单击了窗体上的该按钮。...可以通过单击向上和向下按钮、按向上和向下箭头键来增大和减小数字,也可以直接输入数字。单击向上箭头键时,值向最大值方向增加;单击向下箭头键时,值向最小值方向减少。该控件在工具箱中的图标为 。...即在向列表框添加项之前,调用BeginUpdate方法,以防止每次向列表框中添加项时都重新 绘制 ListBox 控件。...完成向列表框中添加项的任务后,再调用 EndUpdate 方法使 ListBox 控件重新绘制。当向列表框中添加大量的列表项时,使用这种方法添加项可以防止在绘制 ListBox 时的闪烁现象。

9.9K20
  • 实现iframe父窗体与子窗体的通信

    本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。同时本文会提供一个可运行的实例代码,实现在父窗体中,获取到来自子窗体的数据的效果。..., 'iframe2'); (5) 发消息时,要指定messenger的名字和消息,例如父窗体要给子窗体发消息:  // 父窗口中 - 向单个iframe发消息  messenger.targets['...(msg); 2.实例 基于上面的介绍,下面要实现开篇提出的需求了(实例代码只是示例如何传递数据,没有更改父窗体url)。...当接收到iframe子窗体发来的消息后执行。...然后在触发onclick事件时,向父窗口传递消息。发消息时,要指定接收消息的父窗体的messenger的名字,以及传递的消息。

    9.8K771

    【愚公系列】2023年11月 Winform控件专题 Form控件详解

    一、Form控件详解Form是Winform中的一个类,用于表示一个窗体窗口。在Winform中,我们可以通过继承Form类来创建自定义的窗体窗口。...1.属性介绍1.1 autoscalemodeAutoScaleMode属性用于控制当窗体大小发生变化时,窗体上的控件如何自适应调整大小、位置和字体大小等属性。...当使用AutoScaleMode属性时,需要注意以下几点:在窗体中添加控件时,需要设置Anchor属性,以便在窗体大小改变时,控件可以相对于窗体边界或其他控件保持相对位置。...当ShowInTaskbar属性为True时,窗体会显示在任务栏中;当ShowInTaskbar属性为False时,窗体不会显示在任务栏中。...在这个案例中,我们创建了一个Windows窗体,并向它添加了一个标签和一个按钮控件。当用户单击按钮时,我们弹出一个消息框显示“Hello, World!”的消息。

    2.5K21

    Excel实战技巧63: 制作具有数据导航功能的用户窗体

    设计用户窗体 在VBE中,插入一个用户窗体,在其中添加文本框、按钮、标签等控件,如下图1所示。 ?...这个用户窗体需要6个事件:Initialize(当用户窗体打开时)、QueryClose(当用户窗体关闭时),以及每个命令按钮的单击事件。...需要使用事件代码将记录集的当前记录显示在文本框中、以及阻止用户错误操作,例如当处于第一条记录时单击命令按钮cmdPrev(当打开用户窗体或者单击任一按钮时,需要改变文本框来响应事件。因此,Initialize事件和四个按钮中任一按钮的单击事件都将调用上面的程序。在调用上面的程序之前,这些事件将首先设置当前记录。...基本上有两类命令按钮,一类按钮到达记录集的两端即第一条记录和最后一条记录,一类按钮一次移动一条记录。

    3.1K20

    AWT的Container容器

    Container作为容器根类,提供了如下方法来访问容器中的组件 方法签名 方法功能 Component add(Component comp) 向容器中添加其他组件 (该组件既可以是普通组件,也可以...在AWT 中,通过 Frame 类实例化窗体对象;默认情况下,得到的窗体既没有大小,也是不可见的;所以必须调用窗体对象的setSize()方法设置大小,调用窗体对象的setVisible()方法设置可见性...Panel类的构造方法 Panel类的构造方法主要有如表 所列举的两种重载形式。 Panel的默认布局是流式布局(FlowLayout),即从左到右依次排列组件,当宽度不足时自动换行。...panel.add(new Button("测试按钮"));:这是往Panel容器中添加一个Button组件,用于触发事件。...程序明明向 ScrollPane 容器中添加了 一个文本框和一个按钮,但只能看到 一个按钮,却看不到文本框 ,这是为什么 呢?

    11810

    PyQt5编程基础 2.2 信号与槽函数

    appMain.py将myDialog.py文件的测试运行部分单独拿出来作为一个文件 当一个应用程序有多个窗体,并且窗体之间有数据传递时,appMain.py负责创建应用程序的主窗体并运行起来,这样使整个应用程序的结构更清晰...mainform.show() #显示主窗体 sys.exit(app.exec_()) 为组件的内建信号编写槽函数 清空按钮 为清空按钮添加槽函数 进入Qt Creator...,右键点击清空按钮,选择转到槽 选择clicked 在弹出的文件中复制函数名 进入Eric6,在myDialog.py文件的QmyDialog类里定义一个同名函数并编写代码 添加PlainText...修改Ui_Dialog.py中的SetupUI函数 修改后变成 运行程序 选中Underline 信号与槽的管理是如何实现的 在QmyDialog类里定义了三个函数,这三个函数就与相应界面组件的信号关联起来了...RadioButton按钮的clicked()信号与同一个槽函数关联 添加import模块 添加自定义槽函数 在QmyDialog类里顶一个自定义槽函数do_setTextColor(self) 在构造函数中关联信号和槽函数

    1.9K30

    【愚公系列】2023年09月 WPF控件专题 Window窗体属性和事件

    欢迎 点赞✍评论⭐收藏 前言 Windows窗体是Microsoft .NET Framework中提供的一种可视化用户界面(GUI)组件,它提供了一个容器,可以在其中添加其他控件,例如按钮、文本框、...通过向窗体添加控件,并使用事件处理程序来响应用户交互,可以创建功能强大的Windows桌面应用程序。...MaximizeBox和MinimizeBox属性:指定窗体是否具有最大化和最小化按钮。 ControlBox属性:指定窗体是否具有控制框(包括关闭按钮、最大化按钮、最小化按钮)。...LostFocus事件:当窗体失去焦点时触发。可以用来实现窗体失去焦点时的操作。 FormClosed事件:当窗体已经关闭时触发。可以用来进行资源释放等操作。...除了以上常用事件,还有一些其他常用事件,例如: Activate事件:当窗体激活时触发。可以用来实现窗体被激活时的操作。 Deactivate事件:当窗体失去激活状态时触发。

    50211

    超详细的Java容器、面板及四大布局管理器应用讲解!

    面板 在JPanel面板中我们可以添加一些组件来对该面板中的内容进行布局,之所以它具备这样的功能,是因为JPanel面板同样也继承了java.awt.Container类,因此它同样是具有Container...=0时,流布局管理器中的组件按照从左到右的顺序排列,当alignment=1时,流布局管理器中的组件按照从中间向两端的顺序排列。...、南、西、北、中五个区域,在容器中添加组件时,我们可以设置组将放入到哪一个区域中,关于区域的控制可以使用BorderLayout类中的成员方法来确定,关于这些成员变量的具体含义可以参考下表: 成员变量...含义 BorderLayout.NORTH 在容器中添加组件时,组件置于顶端 BorderLayout.SOUTH 在容器中添加组件时,组件置于底端 BorderLayout.EAST 在容器中添加组件时...,组件置于右端 BorderLayout.WEST 在容器中添加组件时,组件置于左端 BorderLayout.CENTER 在容器中添加组件时,组件置于中间开始填充,直到与其他组件边界连接 关于边界布局管理器的具体使用可以参考如下实例

    2.9K10

    【愚公系列】2023年11月 Winform控件专题 TableLayoutPanel控件详解

    TableLayoutPanel控件可以自动调整布局,当窗体大小改变时,其中的控件会自动调整到最佳位置。...我们添加了四个按钮控件,并将它们分配到不同的单元格中。在将表格布局控件添加到窗体的Controls集合后,运行应用程序即可看到按钮以网格布局方式出现在窗体中。...当设置为True时,控件的大小会自动根据内容进行调整。默认情况下,此属性为False。AutoSizeMode:指定当AutoSize为True时,控件根据哪些尺寸进行调整。...在设计视图下,向窗体中添加一个TableLayoutPanel控件。进入控件的属性窗口,在ColumnCount属性中输入所需的列数,例如3列。...当设置完所有行样式后,点击“OK”按钮关闭编辑器窗口。现在可以在TableLayoutPanel中添加控件,并根据需要调整控件的行和列位置,TableLayoutPanel会自动根据行样式进行布局。

    1.7K11

    快速熟悉 PyQt5 与 Eric6 的极速 GUI 开发

    这次将结合使用PyQt5和Eric6以实例的方式向大家展示PyQt5与Eric6的极速GUI开发,同时也可以让大家对PyQt5与Eric6先混个脸熟。...点击OK按钮后出现一个提示框,是否将已有文件添加到项目中?虽然该项目文件夹下还没有任何文件,但是这里选择Yes,因为我曾经选择No后到运行脚本时发现不能执行该功能。...这个操作的意义为:当点击关闭按钮时,执行关闭命令 点击OK后可以看到刚选择的两项已链接附加到关闭按钮上 点击工具栏中的保存按钮后关闭Qt设计师程序 编译测试 回到Eric6中,右键点击...在弹出的窗体代码产生器窗口中点击新建 弹出新建对话框类中输入类名后点击OK 回到窗体代码产生器窗口后展开Button_ok(QPushButton),勾选on_Button_ok_clicked...给源码添加以下内容 保存后F2,没问题了,可以点击确定按钮后还是会报错,是因为我们还没有告诉程序点击确定按钮后程序做出什么反应,修改on_Button_ok_clicked函数如下 保存后

    2.1K20

    PyQt5编程基础 2.2 信号与槽函数-设置信号与槽函数

    Eric6下创建项目项目下只有一个__init__.py文件选择窗体,编译编译后查看文件上面红色框框中的两行代码就是刚刚建好的信号与槽的关联创建窗体业务逻辑类按照界面与业务逻辑分离且界面独立封装的方式定义一个类...这是因为在QmyDialog的构造函数__init__中创建了窗体类的实例对象self.ui,并调用了setupUi()函数。而SetupUi()函数实现了这两个按钮的信号与窗体相关槽函数的关联。...appMain.py将myDialog.py文件的测试运行部分单独拿出来作为一个文件当一个应用程序有多个窗体,并且窗体之间有数据传递时,appMain.py负责创建应用程序的主窗体并运行起来,这样使整个应用程序的结构更清晰...mainform.show() #显示主窗体sys.exit(app.exec_())为组件的内建信号编写槽函数清空按钮为清空按钮添加槽函数进入Qt Creator,右键点击清空按钮...中添加如下函数在myDialog.py中添加对这个函数的调用运行程序按清空按钮内容被清空我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

    45820

    C++ Qt开发:PushButton按钮组件

    QPushButton 是 Qt 框架中用于创建按钮的组件类,是 QWidget 的子类。按钮是用户界面中最常见的交互元素之一,用于触发特定的操作或事件。...,第一个按钮将会保持默认色,如下图; 当然这样的配色显然是无法正常使用的,如果读者学过前端应该知道使用CSS如何美化按钮,QSS也支持CSS中的各种事件,我们以按钮的普通状态,按下抬起为例,将如下QSS...padding-left:3px; /*上内边距为3像素,让按下时字向下移动3像素*/ padding-top:3px; } 此时会呈现三种状态,当默认未被选中时会使用QPushButton...来渲染,而QPushButton:hover则用于悬停时的显示,最后的QPushButton:pressed则是被按下是的颜色渲染,如下所示; 接着我们来看一下如何添加背景图片到Qt中并使用QSS将背景附加到...,接着就需要点击Add Prefix按钮,并在项目根目录新建一个lyshark目录并将所需文件拖拽到该目录下,如下图; 继续点击AddFiles按钮依次选中资源并添加到项目源文件中,当添加结束后按下Ctrl

    1K10

    C++ Qt开发:TabWidget实现多窗体功能

    首先实现如下窗体布局,布局中空白部分是一个TabWidget分页组件,下方是一个PushButton按钮,当用户点击按钮时,自动将Dialog窗体追加到TabWidget组件中,如下图;首先读者需要新建一个名叫...,当用户点击PushButton按钮时,首先new FormDoc新建一个空的窗体,并通过 addTab 方法将 FormDoc 实例添加到 QTabWidget 中,设置了选项卡的显示文本为 IP 地址...另外,该主窗口还实现了一个槽函数 on_tabWidget_tabCloseRequested,当某个选项卡被关闭时触发。...需要注意的是,如果在关闭选项卡时需要执行一些清理工作,可以在 FormDoc 类的析构函数中进行相应的处理。...对应到formoption.ui、actionCharts对应到formcharts.ui上面,当首页按钮被点击后,在MainWindow中执行如下操作,首先判断窗体是否打开了,如果打开了则不允许继续打开新的

    3.2K10

    使用C#开发数据库应用程序

    (2)Form类【Form是.NET Framework定义好的一个最基本的窗体类,具有一些窗体最基本的属性和方法。...TextAlign 按钮上文本的对齐方式 事件 Click 单击按钮时发生 (4)单选按钮【RadioButton】 属性 Checked 指示单选按钮是否以选中 Text 单选按钮显示的文本...} } } c.实现窗体间的跳转 (1)创建窗体对象 被调用的窗体类 窗体对象名=new 被调用的窗体类; (2)显示窗体 窗体对象名.Show(); 例如:...=this; addStudentForm.Show();//显示创建学员用户窗体 } (2)为父窗体添加子窗体列表【在父窗体中添加一个菜单Name(tsmiWindows),添加一个"窗口"菜单项...DataGridView显示数据 (1)添加窗体的控件 (2)设置DataGridView的属性和个列的属性 (3)指定DataGridView的数据源 c.如何保存修改后的数据 (1)增加"

    5.9K30

    WPF|快速添加新手引导功能(支持MVVM)

    阅读导航 前言 案例一 案例二 案例三(本文介绍的方式) 如何使用? 控件如何开发的? 总结 1....并且提示框显示的位置还跟随目标控件在主窗体中的位置灵活变换,不至于显示在蒙版窗体之外,如下图所示: 当目标控件右侧空间足够显示引导提示框时,引导提示框就显示在目标控件右侧;在右侧空间不足时,则将引导提示框显示在目标控件左侧...希望对有需要给自己的项目添加新手引导功能的朋友有一定帮助,通过此文你也能修改出满足自己需求的效果。 2. 如何使用?...,如果位置重叠,那么后加入的控件会显示在先添加的控件上方,呈现遮挡效果); 绑定了前面 MainWindowViewModel 中定义的引导信息列表 Guides,点击下一步按钮(本文显示为我知道了)时...代码组织结构如下: GuideInfo:定义引导信息类,如标题、内容、下一步按钮显示内容。

    2.5K10

    邮件狂欢:Next.js和Resend SDK的电子邮件魔法

    单击页面右侧的“创建 API 密钥”按钮。将出现一个包含表单的模式窗口。为API 密钥名称选择一个名称,然后单击“添加”按钮。单击“添加”按钮后,将为您生成 API 密钥。...在仪表板的左侧,选择域并单击添加域按钮:出现一个新页面。通过在输入字段中输入域来添加域。然后单击“添加”按钮。现在您已添加域,下一步是添加域名系统 (DNS) 记录。...您将被重定向到 DNS 提供商页面,您可以在其中添加 DNS 记录。添加您从重新发送仪表板复制的所有 DNS 记录。然后单击“添加”按钮。接下来,导航回重新发送仪表板并单击验证 DNS 记录按钮。...定义一个名为 的异步函数onSubmit来在用户提交表单时处理表单提交。...该Tailwind组件用于应用 Tailwind CSS 类来设置电子邮件模板的样式。

    2K00

    上位机开发二----第一个程序hallo world

    这个时候如果查看Form1.cs文件,会发现和之前一样,这里就需要介绍另外几个开发GUI界面的知识点了,首先,我们想要实现的功能是:当按下Send按钮时,文本框显示^_^Hello,World^_^字样...,当按下Clear按钮时,文本框清空;这属于人机交互,一般人机交互的处理方式有两种,第一种是查询处理方式,比如在DOS系统下、Linux系统等命令行下的程序设计,第二种是事件处理机制,有了很多的优越性,...,按下按钮是一个事件,那么,如何编写或者在哪编写这个事件的事件处理函数呢?...在VS中很方便,只需要双击这个控件,VS就会自动将该控件的事件处理函数添加进Form1.cs文件,此处我先双击“Send”按钮,可以看到VS自动添加进了 private void button1_Click...,添加文本框清空代码,完整代码如下: //用户项目工程自定义命名空间HelloWorld namespace HelloWorld { //定义了一个名称为Form1的公共类,并且在定义类的同时创建了一个这个类的对象

    82842

    Python GUI项目实战(四)实现学生明细窗体GUI设计

    这一节我们将搭建一个显示学生详细信息的明细窗体,显示该学生的所有信息,只要双击表格中的某一行就能打开。同时显示学生明细信息时我们的明细窗体要表现出三种不同的状态,同时应对显示、添加、和修改三种情况。...在tkinter里面有一个类Tk,其功能是产生一个主窗体,我们前面每次创建窗体时都用到了它。但是在tkinter里有一个规定,应用程序同时只能运行一个主窗体。...现在点击添加学生按钮,就可以正常加载明细信息窗口了! ? 所以,出现这个问题的根源所在就是:使用Tk这个类实例化一个窗体,这个窗体是一个主窗体。已经实例化了一个主窗体,再实例化一个是不可以的。...这里我们规定: 当action_flag = 1时,表示查看模式; 当action_flag = 2时,表示添加模式; 当action_flag = 3时,表示修改模式。 2....点击添加学生按钮,明细窗体标题显示“添加学生明细”;点击修改学生按钮,明细窗体标题显示“修改学生明细”;双击表格学生学生信息某一行,明细窗体标题显示“查看学生明细”。

    2.7K20

    C#上位机开发(二)—— Hello,World

    这里我们双击窗体界面,这也是VS的特性,双击一个控件,就会进入对应代码文件部分,这些代码全由VS在生成项目时自动生成,下面进行详细的解释: 1 /*filename:Form1.cs*/ 2 //使用命名空间...这个时候如果查看Form1.cs文件,会发现和之前一样,这里就需要介绍另外几个开发GUI界面的知识点了,首先,我们想要实现的功能是:当按下Send按钮时,文本框显示^_^Hello,World^_^字样...,当按下Clear按钮时,文本框清空;这属于人机交互,一般人机交互的处理方式有两种,第一种是查询处理方式,比如在DOS系统下、Linux系统等命令行下的程序设计,第二种是事件处理机制,有了很多的优越性,...,按下按钮是一个事件,那么,如何编写或者在哪编写这个事件的事件处理函数呢?...在VS中很方便,只需要双击这个控件,VS就会自动将该控件的事件处理函数添加进Form1.cs文件,此处我先双击“Send”按钮,可以看到VS自动添加进了 private void button1_Click

    2K41
    领券