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

redux-成功提交后未重置表单isDirty

是一个关于前端开发中的状态管理问题。在使用redux进行状态管理时,当表单成功提交后,表单的状态应该被重置,以便用户可以继续输入新的数据。但是有时候会出现表单状态未被重置的情况,即isDirty属性仍然为true。

isDirty属性是redux-form库中的一个属性,用于判断表单是否被修改过。当用户在表单中输入内容后,isDirty属性会被设置为true。而在表单成功提交后,isDirty属性应该被重置为false,以表示表单已经回到初始状态。

解决这个问题的方法有多种,以下是一种常见的解决方案:

  1. 在表单提交成功后,通过redux的action来重置表单状态。可以创建一个名为resetForm的action,该action会将表单的状态重置为初始状态。在提交成功的回调函数中,调用resetForm action来重置表单状态。
  2. 在redux的reducer中,监听resetForm action,并在该action被触发时,将表单的状态重置为初始状态。可以通过在reducer中定义一个名为form的state来保存表单的状态,当resetForm action被触发时,将form state重置为初始状态。
  3. 在表单组件中,通过connect函数将redux的state和action与表单组件进行绑定。通过mapStateToProps函数将form state映射到表单组件的props中,以便在表单组件中可以获取到表单的状态。同时,通过mapDispatchToProps函数将resetForm action映射到表单组件的props中,以便在表单组件中可以调用resetForm action来重置表单状态。
  4. 在表单组件中,通过监听isDirty属性的变化来判断是否需要重置表单状态。当isDirty属性为true时,表示表单已经被修改过,此时可以在表单组件的生命周期方法中调用resetForm action来重置表单状态。

总结一下,解决redux-成功提交后未重置表单isDirty的问题,可以通过创建resetForm action来重置表单状态,监听resetForm action并在reducer中将表单状态重置为初始状态,通过connect函数将表单组件与redux的state和action进行绑定,以及在表单组件中监听isDirty属性的变化来判断是否需要重置表单状态。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云开发:https://cloud.tencent.com/product/tcb
  • 腾讯云云原生应用引擎:https://cloud.tencent.com/product/tke
  • 腾讯云云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云云服务器 CVM:https://cloud.tencent.com/product/cvm
  • 腾讯云音视频处理:https://cloud.tencent.com/product/mps
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发:https://cloud.tencent.com/product/mobdev
  • 腾讯云对象存储 COS:https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务:https://cloud.tencent.com/product/baas
  • 腾讯云元宇宙:https://cloud.tencent.com/product/tencentmetaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

离开页面前,如何防止表单数据丢失?

向用户添加一个确认对话框,询问他们在具有保存表单更改的情况下是否确认重定向是一种良好的用户体验实践。通过显示此提示,用户将意识到他们有保存的更改,并允许在继续重定向之前保存或丢弃它们的工作。...下面是正文~ 在今天的数字化环境中,为涉及表单提交的 Web 应用程序提供最佳用户体验非常重要。用户常见的一个烦恼来源是由于意外离开页面而丢失保存的更改。...仅当表单具有保存的更改(由 hasUnsavedChanges 属性指示)时,才会激活此对话框。...,并在尝试离开保存更改的表单时收到警告。...通过将此功能合并到您的表单中,你可以帮助用户避免失去保存的工作而感到沮丧。

5.8K20
  • React Form组件杂谈

    一、前言 对于网页系统来说,表单提交是一种很常见的与用户交互的方式,比如提交订单的时候,需要输入收件人、手机号、地址等信息,又或者对系统进行设置的时候,需要填写一些个人偏好的信息。...二、Form组件功能 一般来说,Form组件的功能包括以下几点: 表单布局 表单字段封装 表单验证&错误提示 表单提交 下面将对每个部分的实现方式做详细介绍。..._value; }; } 四、表单验证&错误提示 表单验证是一个重头戏,只有验证通过了才能提交表单。验证的时机也有多种,如字段变更时、鼠标移出时和表单提交时。...五、表单提交 表单提交时,一般会经历如下几个步骤 表单验证 表单提交 提交成功处理 提交失败处理 ZentForm通过handleSubmit高阶函数定义了上述几个步骤,只需要传入表单提交的逻辑即可:...太多的情况下对整个表单字段进行了校验,比较合理的情况应该是某个字段修改的时候只校验本身,在表单提交时再校验所有的字段。 表单提交操作略显繁琐,还需要调用一次handleSubmit,不够优雅。

    88510

    MIT 6.830数据库系统 -- lab six

    ---- redo log与undo log 为了支持steal/no-force策略,即我们可以将提交事务的数据更新到磁盘,也不必在事务提交时就一定将修改的数据刷入磁盘,我们需要用日志来记录一些修改的行为...答案是事务提交时,当事务提交时,就意味着这个修改已经是持久化到磁盘了,新的事务修改就数据页的数据就是脏数据了,而在新事务回滚时,由于我们采用的是steal策略,脏页可能已经在页面淘汰时被写入磁盘中了,...当一个更新提交,页的前置镜像也需要更新,以便稍后中止的事务回滚到次提交的页面版本 注意: 我们不能仅在flushPage()方法中调用setBeforeImage()方法,因为即使事务没有被提交...原因:提交的事务在flushPages方法中会更新自己的before_image为最新镜像,那么如果此时调用flushAllPages方法,log日志中记录的就是当前提交事务的最新before_image...,后面如果提交事务回滚,拿着日志中记录的最新的before_image进行回滚,显然是错误的。

    24320

    python测试开发django-183.bootstrap-formvalidation重置校验的方法

    前言 form表单提交之前,需先校验数据合法性,当连续提交时,重置了form表单,校验方法也需要跟着重置 遇到问题 参考前面一篇https://www.cnblogs.com/yoyoketang/p/...15745166.html,重置表单表单校验并没有重置 formvalidation校验 表单校验器 // 表单校验器 function validate_model_form(id){...} }) } // 页面初始化需调用校验方法 $(function() { validate_model_form('#add-model-form'); }); 当提交过一次...,form表单初始化了,再次弹出模态框编辑时,校验方法没重置,于是需重置校验 // 销毁校验 $("#add-model-form").data('formValidation...data('formValidation', null); // 重新初始化校验 validate_model_form('#add-model-form'); 写到ajax提交成功

    32830

    WEB安全新玩法 防护邮箱密码重置漏洞

    [图2] 用户进入到邮件系统中收取寄给 alice@mail.com 的邮件,将邮件中的验证码和需要重置的登录密码填写到表单中并提交。...[图3] 网站判断用户输入的邮箱验证码是正确的,就将 alice@mail.com 所代表的用户的登录密码设置为新的密码,操作成功。...[图4] 在收到邮箱验证码并正确填写,攻击者「mallory」将表单中的手机/邮箱内容改为 alice@mail.com (之前填的是 mallory@mail.com ),然后再填写新的登录密码并提交确认...如此一来,攻击者「mallory」成功重设了受害者「alice」的密码,并可以使用「alice」的身份登录网站。...各个实体的交互流程如下: [表3] 2.2 攻击者访问 如前所示,攻击者在收到邮箱验证码之后,且提交重设密码之前,修改了邮箱地址。

    2.2K30

    文档和元素的几何滚动

    form具有两个方法,该两个方法使用如下所示 // 提交表单 document.forms.shipping.shubmit(); // 重置表单 document.forms.shipping.reset...还有一个onreset事件处理程序来检测表单重置表单提交前将会调用onsubmit程序,如果回调函数的返回值为false则会取消表单提交动作。这是js程序一个用来检查用户的输入错误。...当用户在一个文本域输入文本或从下拉列表中选择一个选项就触发change事件,当用户在一个文本域中该数据不是每次用户输入一个键值时都会触发该事件。它仅仅当用户改变了值才会触发该事件。...false,则不会重置 同样,如果使用表单的onreset()方法也不会触发该事件,将会直接进行重置。...提交重置元素本就是按钮,不同的是它们有与之相关联的默认动作。 即,按钮和超链接类似,都具有共同的作用。 开关按钮 复选框和单选元素为开关按钮,或称之为有两种视觉状态的按钮。即选中或选中。

    5.2K00

    表单的 9 种设计技巧【下】

    例如下图,引用表格组件的 table.selectedRow.data 属性,将表格当前行的数据作为默认值来自动填充表单,并允许用户修改和提交表单: 图片 技巧 7:输入校验和反馈 在提交表单到数据库之前进行数据校验...在码匠中,几乎每个数据录入组件都有校验属性,帮助您基于设置的规则在用户提交数据之前进行检查: 图片 通过配置组件或查询的事件属性,触发表单提交成功或失败的通知,从而根据用户输入的具体情况给出不同反馈,指出当前输入存在的问题...如下图,当电子邮件输入为空时,触发全局提示: 图片 图片 技巧 8:成功提交重置到默认值 一般情况下,在提交表单自动清除输入是很重要的。...在码匠中,可以在表单组件的属性栏选择是否在成功提交重置到默认值。...图片 但在一些特殊情况下,一些表单项的输入值需频繁复用,此时可以在表单中添加一个清除按钮,并配置好单击事件的动作,让用户自己决定是否清除和重置输入。

    2.4K00

    IT课程 HTML基础 013_表单和用户输入

    表单属性: action:定义表单数据提交到服务器的处理文件的 URL。 method:定义数据发送到服务器所使用的HTTP方法,常用的值有 “get” 和 “post”。...autocomplete:用于指定是否启用表单的自动完成功能。如果设置为 on,则浏览器将会自动填充表单中之前输入过的数据。 novalidate:用于指定是否验证表单数据。...类型 属性 功能 使用场景 submit type="submit" 提交表单数据 提交登录表单提交注册表单等 reset type="reset" 重置表单数据 重置搜索表单重置购物车等 button...name、value、checked submit 按钮 用于提交表单。 value reset 按钮 用于重置表单。 value button 按钮 用于创建按钮。...它可以用于提交表单重置表单、或执行其他操作。 type、name、value label 标签 用于为输入元素提供标签。标签可以帮助用户理解输入元素的用途。

    9410

    Flask-10 博客通过发送邮件重置密码

    今天把之前关于Flask_Blog项目中关于当注册用户忘记密码时,通过发送邮件进行密码重置的功能,接下来开始: ?...修改Flask_Blog\flaskblog\forms.py,添加重置密码表单,发送邮件表单: ?...修改Flask_Blog\flaskblog\models.py,添加 定义发送电子邮件重置密码方法,重置密码方法,重置令牌方法: ?...输入邮箱后点击重置密码按钮提交: ? 成功,会提示邮件已经发送到邮箱: ? 这时我们登录找回密码所填写的邮箱,会发现收到一封重置密码的邮件: ?...点击邮件中的重置密码连接,输入新的密码和确认密码提交: ? 提示密码已经修改成功: ? 今天通过邮箱找回密码的功能就到这里,我们下节见! 关注公号 下面的是我的公众号二维码图片,欢迎关注。

    1.8K30

    登录注册表单渗透

    大家在甲方授权的渗透测试中,经常会遇到各种表单:登录、注册、密码修改、密码找回等表单,本技术稿着重介绍关于各种表单的渗透经验,抛砖引玉,欢迎大家交流互动。...爆破成功 漏洞修复: 1.点击获取手机验证码产生即时更新强图形验证码 2.限制输入错误次数 3.缩短验证码的有效期 五、短信轰炸 ?...对手机号进行批量遍历,发现批量成功,存在批量注册漏洞 七、注册表单之覆盖注册 漏洞详情:此漏洞是指以前已经用一个手机注册了会员,由于此漏洞的存在,导致可以利用该手机号重复注册,并且会覆盖之前注册的会员信息...八、任意用户密码重置 漏洞描述:在修改密码表单处 通过修改数据包的特定数据修改任意用户的密码 ? 修改id为需要重置的用户 ? id 10016的密码重置为123456 漏洞修复: 1....问题来了,如果攻击者不带Cookie提交HTTP请求呢?或攻击者不更新Cookie中的loginErr的值反复提交呢?

    3.2K30

    eduSRC那些事儿-3(命令执行类+越权逻辑类)

    本文对edusrc挖掘的部分漏洞进行整理,将案例脱敏输出成文章,不包含0DAY/BYPASS的案例过程,仅对挖掘思路和方法进行相关讲解。...bsh.script=eval%00("ex"%2b"ec(\"whoami\")");&bsh.servlet.captureOutErr=true&bsh.servlet.output=raw 成功获取...Shiro远程命令执行 某大学宿舍管理系统存在apache shiro反序列化:在登录页面时,提交表单发现set-cookie存在remeberMe=deleteMe字样。...越权逻辑类 密码重置 初次登陆需要更改密码,但未验证原始密码, 利用审查元素或抓包更改学号为其他人的,成功重置他人密码, 管理功能限制权限访问 先获取高权限用户权限,然后将高权限用户接口放到低权限用户上访问对其没有限制...cdbh=xxx 直接重置系统任意单位用户密码, http://xxx/xxx/xxx/xxxPassword.jsp 个人照片遍历 直接查看照片链接,是否存在参数或文件名称可猜解(包含学号、工号、ID

    34610

    表单脚本

    特性 name 表单的名称;等价于HTML的name特性 reset() 将所有表单重置为默认值 submit() 提交表单 target 用于发送请求和接收响应的窗口名称;等价于HTML的target...如果表单没有提交按钮,安回车键不会提交表单。 注意,通过上述方式提交表单,浏览器会在将请求发送给服务器之前触发submit事件。 这样就可以决定是否需要验证表单。...提交表单过程中有可能发生的最大问题就是,重复提交表单。 解决方式: (1)第一次提交表单就禁用提交按钮。 要在“submit”事件处理函数中处理,不能在“click”事件处理函数中处理。...重置表单 (1)重置按钮提交 方式1:通用重置按钮 方式2:自定义重置按钮 <button type="reset...阻止这个事件的默认行为就可以取消<em>重置</em><em>提交</em>。

    4.8K41

    YUI3的几点说明

    主要展示了一个表单的布局,校验,加载和提交数据.以及一些比较常用的UI组件....数据的处理步骤和流程 示例中,加载数据时会发一个ajax请求,服务器端返回一个json字符流,前端在回调方法里将其转化为json对象, 并将它绑定到表单里面;提交数据时有二种,一种是原生的表单提交...页面调整,异常处理 页面调整(页面导航)常用的有三类,一类就是菜单,包括工具栏菜单和树型菜单.另外一类就是界面导航和链接.还有一类就是 台创建一个分发器,根据相关的业务逻辑来决定界面的跳转方向....异常处理也有二只方式,一种是捕捉服务器端抛出的异常,在前端以对话框的方式弹出来.另外一种发生异常,导航到一个特定的 友好的错误界面.比如404界面 能否找到丰富的ui控件, 可以,alloyUI...labelText: '地址 :' }], true); // Checking if the form fields have been changed form.isDirty

    84140
    领券