开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

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

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

在表单提交成功后，通过redux的action来重置表单状态。可以创建一个名为resetForm的action，该action会将表单的状态重置为初始状态。在提交成功的回调函数中，调用resetForm action来重置表单状态。
在redux的reducer中，监听resetForm action，并在该action被触发时，将表单的状态重置为初始状态。可以通过在reducer中定义一个名为form的state来保存表单的状态，当resetForm action被触发时，将form state重置为初始状态。
在表单组件中，通过connect函数将redux的state和action与表单组件进行绑定。通过mapStateToProps函数将form state映射到表单组件的props中，以便在表单组件中可以获取到表单的状态。同时，通过mapDispatchToProps函数将resetForm action映射到表单组件的props中，以便在表单组件中可以调用resetForm action来重置表单状态。
在表单组件中，通过监听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

相关搜索:AJAX提交后重置HTML表单 Laravel表单在成功提交后不会重置 Redux-表单在onSubmit成功后无法重定向 redux-表单未触及字段验证在提交时失败使用jQuery提交后重置表单单击提交按钮后重置输入表单如何在表单提交后重置表单域并显示成功或感谢？成功提交表单后出现验证错误成功提交表单后，执行函数提交后角度材料重置表单

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

dedecms自定义表单提交成功后提示信息修改和跳转链接修改

我们在用dedecms自定义表单提交成功后提示信息一般是"Dedecms 提示信息"，这个要怎么改成自己想要的文字呢？还有就是提示页停留时间，目前估计就2秒，太快了，要如何设置长点呢？...通过下面我们就来一起修改一下　　打开/include/common.func.php，大概在266行，改成自己的想要的文字，比如“您已经注册成功”。　　...action=list&diyid={$diy->diyid}"; $bkmsg = '提交成功，请等待客服人员处理,20秒后自动返回......$cfg_cmspath : '/jinshi/'; $bkmsg = '提交成功，请等待客服人员处理,20秒后自动返回...'; }

3K4 0

离开页面前，如何防止表单数据丢失？

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

5.7K2 0

React Form组件杂谈

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

8371 0

MIT 6.830数据库系统 -- lab six

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

1982 0

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提交成功后

3083 0

jquery form

dataType : "json", // 'xml', 'script', or 'json' success : function(data){ //提交成功调用...', // 响应返回的信息给目标赋值 clearForm : true, // 提交成功后清空字段 resetForm : true, // 提交成功后重置...(options); ajaxForm 把原form提交方式变为异步提交在form提交时触发 $("#form").ajaxForm(options); 对比 $("#form").ajaxSubmit...DOM 上的方法把表单重置成最初的状态。...$('#myFormId').clearForm(); clearFields 清空某个表单域的值。这个可以用在只需要清空表单里部分元素的值的情况。

2.5K2 0

jquery的form表单提交

在success回调函数中处理提交成功的情况，而在error回调函数中处理提交失败的情况。通过以上示例，我们使用jQuery实现了一个简单的表单提交操作。...; $("#registrationForm")[0].reset(); // 重置表单 }, error: function(...通过serialize()方法获取表单数据，并使用$.ajax()方法向服务器发送POST请求。当提交成功时，通过success回调函数来显示“注册成功”信息，并重置表单。...htmlCopy code当用户填写完表单后，通过点击提交按钮，浏览器会将表单中的数据封装成一个HTTP请求，然后发送给服务器...服务器接收到请求后，可以对这些数据进行处理，如存储到数据库、发送电子邮件等。

681 0

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

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

2.2K3 0

python测试开发django-182.jQuery重置form表单

前言在页面上弹出添加的模态框，添加完成后，下次继续添加，此时需要重置 form 表单。...btn-default" data-dismiss="modal">取消显示效果输入内容保存成功后...，再几次点添加弹出模态框，还会记录上次输入的内容期望保存成功后，重置form表单的内容重置 form 表单 js 重置表单的方法 document.getElementById("add-model-form...").reset(); ajax 提交成功后在success里面写重置form表单 // ajax 部分代码 success: function (data) {...，如果输入框有默认值,value=”悠悠” 使用.reset()方法会重置输入框的值为”悠悠” 清空后，输入框的值为空value=””

1.5K2 0

文档和元素的几何滚动

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

5.2K0 0

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

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

2.3K0 0

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 标签用于为输入元素提供标签。标签可以帮助用户理解输入元素的用途。

721 0

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

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

1.8K3 0

登录注册表单渗透

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

3.2K3 0

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

2131 0

表单脚本

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

4.8K4 1

web渗透测试--防sql注入

在某些表单中，用户输入的内容直接用来构造动态sql命令，或者作为存储过程的输入参数，这些表单特别容易受到sql注入的攻击。..."> 　　当用户点击提交按钮的时候，将会把表单数据提交给validate.php页面，validate.php页面用来判断用户输入的用户名和密码有没有都符合要求(这一步至关重要...代码分析：如果，用户名和密码都匹配成功的话，将跳转到管理员操作界面(manager.php)，不成功，则给出友好提示信息。 ? 　...2) 构造SQL语句　　填好正确的用户名(marcofly)和密码(test)后，点击提交，将会返回给我们“欢迎管理员”的界面。

2.6K3 0

ElementUI 相关问题整理

1、form 下面只有一个 input 时回车键刷新页面原因是触发了表单默认的提交行为，给el-form 加上@submit.native.prevent就行了。...PS：经评论区的兄弟指正，输入中文后 v-model 会失效，下面的方式更好一点： <el-input v-model="form.retailMinOrder" placeholder="...在一些用户注册场景中，<em>提交</em>整个<em>表单</em>前有时候我们会做一些单独字段的校验，例如发送手机验证码，发送时我们只需要校验手机号码这个字段，可以这样做： this....7、弹窗重新打开时<em>表单</em>上次的校验信息<em>未</em>清除有人会在open时在$nextTick里<em>重置</em><em>表单</em>，而我选择在关闭时进行<em>重置</em>。... // 弹窗关闭时<em>重置</em><em>表单</em> onClose()

1.3K3 0

JavaScript表单基础

name：表单的名字，等价于 HTML 的 name 属性。 reset()：把表单字段重置为各自的默认值。 submit()：提交表单。...提交表单只要有表单就肯定会有提交表单，提交表单的方法我们上面也有，就是submit方法。一般我们都会写一个button按钮，给他设定type值为提交。 { event.preventDefault(); console.log('阻止成功');//阻止成功 }) 一般我们使用场景就是在提交且不跳转页面的时候...，用户点击提交后其实是给服务器发送了表单，但是我们防止用户二次提交，会在提交后执行这个方法，阻止之后的提交。...还有一种方法就是直接禁用提交按钮，给它设置一个disabled属性。表单字段的公共属性前面提到disabled属性，这个就是禁用。我们看一下表单里面都有什么公共属性。

1.1K2 0

jQuery插件 -- Form表单插件jquery.form.js

jquery.form.plugin.html#getting-started 1 $('#myForm').ajaxForm(function() { 2 $('#output1').html("提交成功...myForm2').submit(function() { 6 $(this).ajaxSubmit(function() { 7 $('#output2').html("提交成功...dataType: null, //html(默认), xml, script, json...接受服务端返回的类型 8 //clearForm: true, //成功提交后...，清除所有表单元素的值 9 //resetForm: true, //成功提交后，重置所有表单元素的值 10 timeout: 3000...37 }); 表单提交之前进行验证： beforeSubmit会在表单提交前被调用，如果beforeSubmit返回false，则会阻止表单提交 1 beforeSubmit: validate

13.5K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭