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

在redux表单中单击提交后,如何不重置字段中的数据?

在redux表单中,单击提交后不重置字段中的数据,可以通过以下步骤实现:

  1. 在redux的reducer中,定义一个新的action类型,例如"SUBMIT_FORM"。
  2. 在reducer中,处理"SUBMIT_FORM"类型的action,将表单数据保存到state中的一个新字段,例如"submittedData"。
  3. 在表单组件中,使用connect函数将redux的state和action与表单组件进行绑定。
  4. 在表单组件中,使用onSubmit事件处理程序来触发"SUBMIT_FORM"类型的action,并阻止表单的默认提交行为。
  5. 在表单组件中,使用redux的state中的"submittedData"字段来初始化表单的初始值。

这样,当用户单击提交按钮时,表单数据将被保存到redux的state中的"submittedData"字段,而不会重置表单字段中的数据。同时,表单组件也可以通过redux的state中的"submittedData"字段来初始化表单的初始值。

以下是一个示例代码:

代码语言:txt
复制
// Redux reducer
const initialState = {
  submittedData: null,
};

const formReducer = (state = initialState, action) => {
  switch (action.type) {
    case "SUBMIT_FORM":
      return {
        ...state,
        submittedData: action.payload,
      };
    default:
      return state;
  }
};

// Redux action
const submitForm = (data) => {
  return {
    type: "SUBMIT_FORM",
    payload: data,
  };
};

// Form component
import React from "react";
import { connect } from "react-redux";
import { submitForm } from "./actions";

class Form extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData.entries());
    this.props.submitForm(data);
  };

  render() {
    const { submittedData } = this.props;
    const initialValues = submittedData || {};

    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="name" defaultValue={initialValues.name} />
        <input type="email" name="email" defaultValue={initialValues.email} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    submittedData: state.form.submittedData,
  };
};

export default connect(mapStateToProps, { submitForm })(Form);

请注意,以上示例代码中并未提及任何特定的云计算品牌商,如需了解腾讯云相关产品和产品介绍,建议访问腾讯云官方网站或咨询腾讯云官方客服。

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

相关·内容

浅谈laravel-admin form数据,提交,保存前,获取并进行编辑

有一个这样需求: 当商品设置为立即上架时,通过审核就进入上架状态,当设置为保存时,通过审核就进入未上架状态。...所以,需要在保存前根据提交审核状态和设置方式得到商品状态再保存,而通过$form- model()- attribute_name只能获取提交值,不能更改。...Google之后发现了已经有解决方案:可以修改提交表单逻辑吗 #375 模型添加如下方法: public static function boot() { parent::boot();...static::saving(function ($model) { // 从$model取出数据并进行处理 }); } 以上这篇浅谈laravel-admin form...数据,提交,保存前,获取并进行编辑就是小编分享给大家全部内容了,希望能给大家一个参考。

4.1K62

浅谈laravel-admin form数据,提交,保存前,获取并进行编辑

有一个这样需求: 当商品设置为立即上架时,通过审核就进入上架状态,当设置为保存时,通过审核就进入未上架状态。...所以,需要在保存前根据提交审核状态和设置方式得到商品状态再保存,而通过$form->model()->attribute_name只能获取提交值,不能更改。...Google之后发现了已经有解决方案:可以修改提交表单逻辑吗 #375 模/ /型添加如下方法: public static function boot() { parent::boot()...; static::saving(function ($model) { // 从$model取出数据并进行处理 }); } 以上这篇浅谈laravel-admin form数据,提交,保存前,...获取并进行编辑就是小编分享给大家全部内容了,希望能给大家一个参考,也希望大家多多支持/ /。

3.5K00

ExtJs二(实现登录)

如果想要在脚本中使用ExtJS提示信息,可将书附带资源包Ext.js文件复制到ExtJS目录,复制解决方案资源管理器将Ext.js拖到到login.js文件,就会生成以下代码:  //...一般登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码图片、登录和重置按钮。因而需要用到ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...6.接着加入表单面板提交地址,这里定为Account/Login,就是Account控制器Login方法,代码如下: url: "Account/Login", 7.因为表单内使用都是文本字段,因而可以统一做一些定义...验证码区分大小写,如果看不清楚验证码,可单击图片刷新验证码。"...登录失败(failure配置项),只写了一个空函数目的是因为表单提交返回数据格式是一样,处理方式也一样,因而可使用同一个函数进行处理,但是还没写到,因而先保留一个空函数。

1.8K20

JavaScript(十三)

提交表单时可能出现最大问题,就是重复提交表单。解决这一问题办法有两个: 第一次提交表单就禁用提交按钮 利用 onsubmit 事件处理程序取消后续表单提交操作。...重置表单 在用户单击重置按钮时,表单会被重置。使用 type 特性值为 “reset” input 或 button 都可以创建重置按钮,如下: <!...重置表单时,所有表单字段都会恢复到页面刚加载完毕时初始值。如果某个字段初始值为空,就会恢复为空; 而带有默认值字段,也会恢复为默认值。...用户单击重置按钮重置表单时,会触发 reset 事件,利用这个机会,我们可以必要时取消重置操作。 表单字段 可以像访问页面其他元素一样,使用原生 DOM 方法访问表单元素。...字段提交表单时都不能空着。

3.3K20

ExtJs二(实现登录)

如果想要在脚本中使用ExtJS提示信息,可将书附带资源包Ext.js文件复制到ExtJS目录,复制解决方案资源管理器将Ext.js拖到到login.js文件,就会生成以下代码:  //...一般登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码图片、登录和重置按钮。因而需要用到ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...6.接着加入表单面板提交地址,这里定为Account/Login,就是Account控制器Login方法,代码如下: url: "Account/Login", 7.因为表单内使用都是文本字段,因而可以统一做一些定义...验证码区分大小写,如果看不清楚验证码,可单击图片刷新验证码。"...登录失败(failure配置项),只写了一个空函数目的是因为表单提交返回数据格式是一样,处理方式也一样,因而可使用同一个函数进行处理,但是还没写到,因而先保留一个空函数。

2K10

HTML表单用法

get是从服务器上获取数据,post是向服务器传送数据。 get是把参数数据队列加到提交表单ACTION属性所指URL,值和表单内各个字段一一对应,URL可以看到。...post是通过HTTPpost机制,将表单内各个字段与其内容放置HTML HEADER内一起传送到ACTION属性所指URL地址。用户看不到这个过程。 get传送数据量较小,不能大于2KB。...3、input里,name 有什么作用? name 属性用于对提交到服务器表单数据进行标识,只有设置了 name 属性表单元素才能在提交表单时传递它们值。 4、radio 如何分组?...=”hidden” name=”ExPws” value=”dd”> 其实说白了就隐藏域不在前台显视,跟表单元素一样.有名字有数值,只是提交数据是不可见 隐藏域作用: 隐藏域页面对于用户是不可见...,表单插入隐藏域目的在于收集或发送信息,以利于被处理表单程序所使用。

2.4K50

HTML基础知识之表单

表单用途非常广泛,比如电子邮箱、用户注册登录、网上搜索等,简单来说,表单是一个将用户信息阻止起来容器; 一、表单标签及属性 标签就是表单标签,该标签用于在网页创建表单区域,属于一个容器标签...; action:表单属性之一,用于指示服务器上处理表单输出程序; method:表单属性之一,此属性告诉浏览器如何数据发送给服务起,指定向服务器发送数据方法,是用post或者get; <form...maxlength属性:指定可在text或password元素输入最大字符数; (2)三种按钮 reset按钮:重置按钮,将表单重置为最初状态; submit按钮:提交按钮,用户单击按钮表单将会提交到...action属性所指URl,并传递表单数据; button按钮:普通按钮,需要与事件关联使用; 四、表单只读与禁用设置 readonly:只读,网站服务器方希望用户修改数据,这些数据表单元素显示...; disabled:禁用,只有满足某个条件,才能选用某项功能; 禁用表单不会被提交

94030

Element Plus 表单验证详解

ref 用于方法引用表单,rules 用于设置验证规则,label-width 设置表单标签宽度。:表单项容器。...label 属性用于设置表单标签,prop 属性用于绑定验证规则。:输入框组件,使用 v-model 绑定数据。:按钮组件,用于提交重置表单。...submitForm:提交表单时触发,调用 validate 方法验证整个表单。resetForm:重置表单,将所有字段重置为初始值,并移除校验结果。...prop 是字段属性名称,callback 是验证完成回调函数。resetFields(): 重置表单,将所有字段重置为初始值,并移除校验结果。...clearValidate(props): 移除表单校验结果。props 是需要移除校验字段属性组成数组,如果传则移除所有字段校验结果。

23710

文档和元素几何滚动

目的是避免不完整或者无效数据通过网络提交到服务端程序。onsubmit事件只能通过单击提交按钮触发。...当用户一个文本域输入文本或从下拉列表中选择一个选项就触发change事件,当用户一个文本域中该数据不是每次用户输入一个键值时都会触发该事件。它仅仅当用户改变了值才会触发该事件。...失去焦点触发blur事件 事件处理程序代码关键字this将会触发该事件文档元素一个引用,或者通过this.form.x得到该表单以x命名元素 事件总结 提交触发事件 当用户单击按钮(或者回车时候...重置触发事件 当用户单击重置按钮,将会触发onreset事件。...当用户单击按钮,会触发onclick事件,由于改变状态会触发onchange事件,但是,当用户单击其他单选按钮而导致这个单选按钮状态改变,后者触发onchange事件。

5.2K00

HTML表单

在网页,最常见表单形式有文本框,密码文本框,单选按钮,复选框,按钮(普通,提交重置),文件域或图像域,文本域和列表(菜单)。 表单标记是。...action:表单处理程序,表单收集到数据将要提交地址。 name:为了防止表单信息提交到后台处理程序时出现混乱而设置名称。...6.提交按钮: 提交按钮不需要设置onclick单击该按钮时可以实现表单内容提交。...7.重置按钮: 单击重置按钮,可以清楚表单内容,恢复默认内容。 例如: ? 浏览器打开,效果如图: ?...正常情况只能看到一个选项,单击菜单可以看到所有的选项。 如下是一个实现血型,生肖,星座下拉列表: ? 浏览器打开,效果如图: ?

5.3K20

input标签type属性汇总

6.提交按钮 提交按钮是表单核心控件,用户完成信息输入一般都需要单击提交按钮才能完成表单数据提交。...可以对其应用 value属性,改变提交按钮上默认文本。 7.重置按钮 当用户输入信息有误时,可单击重置按钮取消已输入所有表单信息。...如果所输入内容是URL地址格式文本,则会提交数据到服务器;如果输入值不符合URL地址格式,则不允许提交,并且会有提示信息。...在用户输入内容,其右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容。...16 number类型 number类型 <input/标记用于提供输入数值文本框。提交表单时,会自动检查该输入框内容是否为数字。

1.6K10

6.HTML输入表单标签元素介绍

enctype 属性: 规定在向服务器发送表单数据之前如何对其进行编码, POST 请求使用其值为(text/plain、multipart/form-data、application/x-www-form-urlencoded...Get 请求:用于没有敏感信息,且少量数据提交,其表单数据页面地址栏是可见,例如 action page.php?...firstname=Mickey&lastname=Mouse Post 请求:通常用于敏感信息以及大量数据提交,它更加安全其页面地址栏中被提交数据是不可见。...,选择这些文件可以使用提交表单方式上传到服务器上,或者通过 Javascript 代码和文件 API 对文件进行操作,注意该提交必须为POST请求。...formnovalidate 属性: 带有两个提交按钮表单(进行验证或不进行验证),第一个提交按钮提交数据时带有默认表单验证,第二个提交按钮提交数据时不进行表单验证。

4.5K10

React 组件优化

useReducer 工作原理与 redux 有些相似,useReducer 返回数组第二个参数就像 redux dispatch,可以派发 action。...函数接收原始 state 数据,它会把这个数据深度克隆,然后把克隆 state 传递给回调函数,我们回调函数里就可以进行 push 操作了!...Formik 工具库 Formik 库可以让你在 React 轻松构建出健壮 Form 表单程序。... 组件比较复杂,构建 Formik 表单程序时,Formik 和下面它几个属性是需要设置: initialValues 接收一个对象,表示初始化表单控件值,对象键应是表单... Formik 官网,作者也举例了使用 redux-form 缺陷: 表单状态本质上是短暂和局部,并不需要 redux 对其进行跟踪; 使用 redux 管理状态时,状态更新要派发 action

7.2K20

【Java 进阶篇】创建 HTML 注册页面

每个输入字段都有相应标签,提高了表单可读性和可访问性。 表单属性 创建表单时,我们使用了一些重要属性来定义表单行为和外观: action:指定表单数据提交服务器端脚本URL。...required:这个属性用于标记字段为必填字段,如果用户未填写将无法提交表单。 处理表单提交 实际应用,当用户填写并提交表单时,通常需要使用服务器端脚本来处理表单数据。...在上面的示例,我们将表单数据提交到"process_registration.php"进行处理。该服务器端脚本,你可以获取并验证用户提交数据,然后执行相应操作,如将用户信息存储到数据。...当表单提交,服务器会处理用户请求,执行相应操作,并返回结果给用户。 表单验证 处理用户提交数据时,表单验证是至关重要。它确保输入数据符合期望格式和要求,防止恶意数据或错误数据提交。...总结 通过本博客,我们学习了如何创建一个简单HTML注册页面,包括表单元素、标签、输入字段提交按钮。我们还了解了一些用于验证用户提交数据常见技巧和最佳实践。

32320

实战 | 0~1 自定义组件开发问卷小程序

步骤2:定义数据源 传统开发流程需要先进行需求分析,分析完成需要按照需求进行数据设计,腾讯云微搭低代码平台中,只需控制台左侧数据源管理】自定义数据源即可,无需单独构建数据库。...设置完毕需要单击页面底部【立即创建】按钮,否则刚才添加字段都不生效。...容器组件内放入文本组件。选中容器组件左侧组件面板单击【文本】组件,并在文本组件【数据】>【文本内容】修改文本内容。...单选内容 value 会被提交数据库里。 8. 调查项添加完毕,给调查表内容底部增加提交按钮。按钮放置表单容器插槽,与表单组件平级,以关联到同容器内表单组件数据。...数据管理 用户填写了问卷调查,管理员可以单击数据源管理】,查看用户提交问卷信息数据单击数据管理后台】,腾讯云微搭低代码 LowCode 平台自带内容管理(CMS)后台可以查看和管理数据

2.9K20

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

本教程,您将学习如何使用 React-Email、Next.js 和 Resend 从经过验证域发送电子邮件。先决条件以下是您在本教程需要遵循内容:Node.js 安装在您计算机上。...仪表板左侧,选择域并单击添加域按钮:出现一个新页面。通过输入字段输入域来添加域。然后单击“添加”按钮。现在您已添加域,下一步是添加域名系统 (DNS) 记录。...toast从库导入react-hot-toast,成功发送电子邮件显示通知。定义一个名为 异步函数onSubmit来在用户提交表单时处理表单提交。...reset提供功能用于useForm提交重置表单字段。实施动态电子邮件模板使用 React Email,创建现代电子邮件模板变得非常容易。...该POST函数是一个异步函数,用于处理传入 POST 请求。、和变量是从解析请求正文中提取name。emailmessage现在,导航到项目的主页并在表单字段输入一些数据。点击“预约”按钮。

82000

想知道HTML语法结构?看这一篇就够了(超全解析html语法)

段落标记在段前和段各添加一个空行,而定义段落标记内容不受该标记影响。 3.标题标记 HTML标记设定了6个标题标记,分别为、、、、、。...HTML表单标记 1.…表单标记 表单标记以标记开头,以标记结尾。表单标记可以定义处理表单数据程序URL地址等信息。...name属性 name属性用于指定表单名称,该属性值可以由程序员自定义。 onSubmit属性 onSubmit属性用于指定当用户单击提交按钮时触发事件。...、密码域、单选选项、复选框、文本域、隐藏域、提交按钮、重置按钮、普通按钮和图像域共10个输入字段。...="value">默认值 标记属性说明如下表所示: 属性 描述 name 用于指定多行文本框名称,当表单提交服务端获取表单数据时应用 cols 用于指定多行文本框显示列数

5.6K30
领券