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

在redux-form上使用redux-react library时,表单输入不会更改

的问题可能是由于以下几个原因导致的:

  1. 缺少表单字段的连接:在使用redux-form时,需要确保表单字段与Redux store中的状态进行连接。可以使用connect函数从Redux store中获取表单字段的值,并将其传递给表单组件。确保在表单组件中使用Field组件来渲染表单字段,并将其与Redux store中的状态进行连接。
  2. 未正确处理表单提交:在使用redux-form时,需要确保正确处理表单的提交。可以使用handleSubmit函数来处理表单的提交操作,并在提交时更新Redux store中的状态。确保在表单组件中使用reduxForm高阶函数来包装表单组件,并将handleSubmit函数传递给表单组件。
  3. 未正确设置表单字段的值:在使用redux-form时,需要确保正确设置表单字段的初始值和更新值。可以使用initialValues属性来设置表单字段的初始值,并使用change函数来更新表单字段的值。确保在表单组件中使用reduxForm高阶函数来包装表单组件,并将initialValues属性和change函数传递给表单组件。
  4. 未正确处理表单字段的更改:在使用redux-form时,需要确保正确处理表单字段的更改。可以使用onChange属性来监听表单字段的更改事件,并在更改时更新Redux store中的状态。确保在表单组件中使用Field组件来渲染表单字段,并将onChange属性传递给表单字段。

综上所述,要解决在redux-form上使用redux-react library时表单输入不会更改的问题,需要确保正确连接表单字段、正确处理表单提交、正确设置表单字段的值以及正确处理表单字段的更改。如果问题仍然存在,可能需要进一步检查代码逻辑和调试错误。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议参考腾讯云的官方文档和开发者社区,以获取与云计算相关的产品和解决方案。

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

相关·内容

redux-form的学习笔记二--实现表单的同步验证

实现一个同步验证的表单,它将满足以下条件: 1有三个输入框:用户名输入框(username),邮箱输入框(email)和年龄输入框(age) 2如果点击输入框获取焦点后未输入内容,则在输入框失去焦点后发出错误...,则提示警告(warn)内容,此时虽然发出警告但仍能提交成功(请区分和2和3中的区别) 5尚未输入内容(pristine=true)或在提交过程中(submitting=true),禁止使用提交按钮...点击清空按钮,调用reset()方法清空所有输入框中的内容 首先附上form.js的代码:(这份展示一共两份代码:index.js和form.js,index.js的内容请看上一篇博客) import...的SyncValidationForm的values对象输入后是这样的: { username:彭湖湾, email:2314838003@qq.com, age:20 } component属性的值是...),dispatch和props(传递给自定义表单组件的属性) pristine是一个布尔型的值,如果表单初始化后尚未输入值,为true,否则为false,当你向表单中第一个输入框中输入值的时候,pristine

1.8K50

redux-form的学习笔记

github获得了5580颗star和654颗的fork数,今天就写一下我的redux-form的学习笔记吧 左转redux-form的api文档地址:http://redux-form.com/6.5.0...的接口,就可以实现在表单输入的内容与state对象中form表单数据的同步了 我下面将写两个文件index.js和form.js代码见下图红色标题的下方 我的入口文件(src下的index.js)是这样的...import { Field, reduxForm//或者其他的组件 } from 'redux-form';         引入必要的redux-form表单组件,比如Field,Fields,FormSection...等 然后文件最下方写入: export default reduxForm({ form: 'simple' // 你的表单组件的特殊标记 })(SimpleForm) // 这里的SimpleForm...是你写的表单组件 然后你就可以写你的表单组件啦!

1K90
  • Redux框架reducer对状态的处理

    前言 react+redux项目里,关于reducer处理state的方式,redux官方文档中有这样一段描述: 不要修改 state。 使用 Object.assign() 创建了一个副本。...redux-form 当组件采用redux-form进行监听后,内部form表单里的对象都将被放入redux的state中进行管理,并由redux-form自身发起action进行更新删除等操作。...问题在于,每次表单的更新,redux-form都会发起一次action,这意味着我们一个input框里输入一句简单的"hello world",默认情况下将会有11个state副本产生。...至于创建副本的目的是为了追溯历史操作与更改,则类似redux-form这样短时间高频率的更改state的方式,产生的大量细碎历史,或许并没有必要?...小结 就redux-form而言,一些场景中,能明显感受到输入操作存在顿挫感。显然,当我们选择外部插件,需要合理考虑其对state的处理方式。

    2.1K50

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

    由于大约有 30 个独特的表单,很快就明显发现,我们可以通过标准化不仅是输入组件,还有数据表单中的流动方式来获益。 为什么不使用 Redux-Form?...Redux-Form 每次按键都会多次调用整个顶层 Redux reducer。...对于小型应用程序来说这没问题,但如果您使用 Redux-Form,随着 Redux 应用程序的增长,输入延迟将继续增加。...不是因为我认为 React 实现表单方面采取了错误的方法,而是因为使用 React 表单是最具挑战性的问题。 许多框架都有自己的解决方案来处理表单。AngularJS 在这方面做得非常好。...对于普通的表单来说,它表现得很好,但在多步骤表单方面有些困难。虽然后来他们添加了“向导”表单,但使用起来并不太直观。 此外,Formik 依赖于表单元素,并且控制 Redux 存储存在一些挑战。

    72530

    React 组件优化

    而 immer 轻量、简洁、易上手、并且使用起来也非常的舒服,不会产生容易把 immutable 数据类型与原生 JS 数据类型搞混的情况。 3....: 相当于增强版的 input 标签(它也可以表示别的表单组件),使用时,也应设置如 type、name 等属性。... 组件比较复杂,构建 Formik 表单程序时,Formik 和下面它的几个属性是需要设置的: initialValues 接收一个对象,表示初始化的表单控件的值,对象的键应是表单的... Formik 官网,作者也举例了使用 redux-form 的缺陷: 表单状态本质是短暂的和局部的,并不需要 redux 对其进行跟踪; 使用 redux 管理状态,状态更新要派发 action...,这对于小型应用程序来说很好,但是随着 Redux 应用程序的增长,使用 Redux-Form,则输入延迟将继续增加。

    7.2K20

    Meatier — 内容丰富的类Meteor框架

    下面是我对Meteor的主要抱怨: 基于Node 0.10,并且近期不会改变 构建系统不支持代码分离(事实完全相反,打包整个应用) 全局变量(并没有名称空间) 太依赖websockets(并不是每个页面都需要它...客户端验证 Simple Schema Joi 清晰的API,尽管这个包挺大 数据库钩子 Collections2 GraphQL GraphQL 对于小应用来说太重了 (但是内容丰富) 表单 AutoForm...redux-form 非常棒的状态跟踪,与 react 完美结合 客户端缓存 Minimongo redux 加分项,日志,时光旅行,撤销功能 Socket 服务器 DDP-server socketcluster...扩展简单,发布订阅,认证,中间件 认证 Meteor accounts JWTs JWTs 也能提供认证服务 认证传输 DDP GraphQL (via HTTP) 只有必要使用sockets 前端...css,能内嵌或在文件中使用变量 Optimistic UI 延时补偿 redux-optimistic-ui 由你来编写 Testing Velocity (或者完全没有) AVA 非常棒的es2016

    90090

    ASP.NET安全

    ASP.NET 安全 概述   安全web领域是一个永远都不会过时的话题,今天我们就来看一看一些开发ASP.NET MVC应用程序时一些值得我们注意的安全问题。...ASP.NET MVC中主要有两种认证机制 Forms 认证 Windows 认证 Forms 认证   从字面上我们就可以得到一些信息,基于表单的认证提供给用户一个表单可以输入用户名和密码,然后我们可以我们的程序中写自己的逻辑去验证这些信息...当我们某一个Controller应用Authorize属性,也就意味着这个Controller下所有的Action都必须是经过认证的用户才允许访问 。   ...Anti XSS library 如果我们允许用户输入html的话,有些人可能会尝试输入一些脚本 (不要说你没有想过博客园输入一些脚本来玩玩?) ?...这些恶意的站点就可以自己封装一个表单并提交到我们的服务器,虽然这个请求恶意站点伪造的,但是因为它带有用户的身份,所以服务器是会正常处理的。小到更改用户资料,大到转走用户的账户余额都成为可能。

    2.7K80

    Struts2 学习之小白开始

    struts1 VS struts2 struts1 里使用 ActionServlet 作为控制器,Struts2 使用过滤器作为控制器 Struts1 中每个 HTML 表单都对应一个 ActionForm...来显示各种对象模型,可以不再使用 EL 和 JSTL Struts2 环境搭建 新建 Model,并勾选 Struts2 ,之后选择 Struts2 所要使用library,你可以直接在新建页面中选择...点击下一步之后为自己的 struts2 项目命名(命名的时候建议第二栏 Content Root 的路径后改名,若在第一栏中更改只是更改第一栏的,其余两栏不会更改) ?...blank\WEB-INF\classes,将其创建于 src 目录下 Struts2 HelloWorld   搭建好 Struts2 的开发环境之后我们开始第一个 Struts2 程序的编写,其要求为一个表单输入用户的基本信息点击提交后跳转到另一个页面显示用户所输入的信息... index.jsp 中编写页面代码,供用户输入基本信息,如下: ?

    64060

    【工具】15个非常实用的 JavaScript 表单验证库

    1、ApproveJS 地址:https://charlgottschalk.github.io/approvejs/docs/ ApproveJs不会自动将其自身附加到输入更改事件或表单提交事件。...可以轻松地将脚本插入现有的HTML表单代码中,而无需大量更改HTML代码。或从头开始实施。...该脚本还可以处理输入字段,文本区域,复选框,单选按钮和选择列表的输入值填充(如果已指定默认值)以及何时将表单发布并返回给用户。这意味着当表单无效,用户无需两次输入相同的信息!...14、Java Form Validation Library 这是一个完整的库,用于验证客户端输入并相应地提供反馈。JavaScript库包含12个基本的验证函数,可以验证所有类型的表单字段。...它在本机JavaScript上有效,这意味着页面将被大量加载更快-特别是移动设备-无需jQuery! ?

    6.1K20

    Struts2 学习之小白开始

    struts1 VS struts2 struts1 里使用 ActionServlet 作为控制器,Struts2 使用过滤器作为控制器 Struts1 中每个 HTML 表单都对应一个 ActionForm...来显示各种对象模型,可以不再使用 EL 和 JSTL Struts2 环境搭建 新建 Model,并勾选 Struts2 ,之后选择 Struts2 所要使用library,你可以直接在新建页面中选择...点击下一步之后为自己的 struts2 项目命名(命名的时候建议第二栏 Content Root 的路径后改名,若在第一栏中更改只是更改第一栏的,其余两栏不会更改) ?...blank\WEB-INF\classes,将其创建于 src 目录下 Struts2 HelloWorld   搭建好 Struts2 的开发环境之后我们开始第一个 Struts2 程序的编写,其要求为一个表单输入用户的基本信息点击提交后跳转到另一个页面显示用户所输入的信息... index.jsp 中编写页面代码,供用户输入基本信息,如下: ?

    51720

    【分享】集简云架应用的编码模式说明

    代码模式和表单模式分别保存;对一个的更改不会影响另一个。...当前可见编辑器中的设置是 集简云 您的集成中使用的设置第一次切换到编码模式,集简云 会复制 API 请求表单输入的所有内容,包括添加的任何自定义选项,并将它们转换为 Python 代码。...如果代码运行时间超过 30 秒,则会超时,用户的流程将不会成功。请注意,更改不会自动保存。添加所需代码后,单击保存并继续或者使用快捷键(Ctrl+s)将更改添加到我们的集成中。...切换到编码模式后,集简云 将使用我们的自定义代码进行该 API 调用,而不使用我们之前表单输入的数据。...如果我们想切换回表单模式,请单击“切换至表单模式”按钮以查看我们第一次切换到编码模式表单选项。集简云 将保存我们输入的代码,但不会将其转换回表单模式或在您的实时集成中使用自定义代码。

    1.6K20

    剥开比原看代码09:通过dashboard创建密钥,前端的数据是如何传到后端的?

    在前一篇文章中,当我们第一次浏览器中打开dashboard,因为还没有创建过密钥,所以比原会提示我们输入一些别名和密码,为我们创建一个密钥和相应的帐户。就是下面这张图所对应的:  ?...之所以要弄一个单独的出来,这是因为我们文章中,每次引用一段代码的时候,都会给出相应的github的链接,方便读者跳过去查看全貌,使用一个独立项目,会让这个过程更简便一些。...由于比原的前端页面是使用React为主的,所以我猜想在代码中,也该会有一个名为Register的组件,或者某个表单中有一个名为Register的按钮。...注意这5个数字并不是从上到下标注,而是按照我们关注的顺序来的: 表单的各个输入框,就是我们填写别名和密码的地方。...其中的handleSubmit是从该表单使用的第三方redux-form中传入的,用来处理表单提交,我们在这里不关注它,只需要知道我们需要把自己的处理函数this.submitWithErrors传给它

    78610

    input disabled不能提交表单

    今天,开发过程中发现一个问题,提交form表单,有一个input一直不能被提交,后台一直报错!究其原因,是因为该input设置了disabled属性。...一、readonly & disabled区别 readonly和disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。...如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单,这个表单输入项将不会被提交。...某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是提交需要传递该值,此时应该将它的属性设置为readonly。 2....经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit

    2.7K51

    Sentry 开发者贡献指南 - 前端(ReactJS生态)

    React 定义 React 组件 新组件需要访问 this 使用 class 语法,以及类字段+箭头函数方法定义。...我们通过 label 文本找到表单元素(就像用户一样),我们从他们的文本中找到链接和按钮(就像用户一样)。 作为此目标的一部分,我们避免测试实现细节,因此重构(更改实现但不是功能)不会破坏测试。...查询 尽可能使用 getBy... 仅在检查不存在使用 queryBy... 仅当期望元素可能不会立即发生的 DOM 更改后出现时才使用 await findBy......文本查找表单元素,因此测试表单首选此选项。...当您添加/删除您需要的查询,您不必使 render 调用解构保持最新。您只需要输入 screen 并让您的编辑器的自动完成功能处理其余的工作。

    6.9K30

    React 我爱你,但你太让我失望了

    当我刚开始遇到你,我刚刚结束了和 Angular.js 的长期关系。我已经被 watch 和 digest 折腾累了,更不用说 scope 了。我一直寻找不会让我感到痛苦的东西。 这就是一见钟情。...处理表单太费劲了 当我让你处理表单的时候,事情就开始变得奇怪了。原生JS中,表单和用户输入就是很难处理的。但是有了 React 之后,我感觉更困难了......但实际我还要做默认值、验证、依赖输入和错误消息处理等操作,还需要写大量代码,我不得不借助一些第三方表单框架,但这些框架也都有各自的缺点。...当我们使用 Redux Redux-form 看起来是一个很自然的选择,但后来他的核心开发者放弃了它; React-final-form,充满了未修复的 bug,核心开发者也放弃了; Formik...但是它们迫使我不需要的代码花费时间。 例如,我有一个可以由用户拖动的“调试器”组件。用户还可以隐藏调试器。隐藏,调试器组件不渲染任何内容。所以我很想“早点离开”,避免白白注册事件监听器。

    1.1K20

    readonly 和 disable的区别

    readonly和disabled它们都能够做到使用户不能够更改表单域中的内容。...disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(readonly接受值更改可以回传,disable接受改但不回传数据)。...一般比较常用的情况是: 某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是提交需要传递该值,此时应该将它的属性设置为readonly 。...经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit...disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单,这个表单输入项将不会被提交。

    1.4K40

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

    向用户添加一个确认对话框,询问他们具有未保存表单更改的情况下是否确认重定向是一种良好的用户体验实践。通过显示此提示,用户将意识到他们有未保存的更改,并允许继续重定向之前保存或丢弃它们的工作。...通过事件上调用 preventDefault 方法,我们可以触发浏览器的确认对话框。仅当表单具有未保存的更改(由 hasUnsavedChanges 属性指示),才会激活此对话框。...,输入的数据不会被保存,也不会出现任何确认对话框。...使用 Prompt ,导航到主页路由时行为正确,但是当用户输入表单数据并进入下一步,确认对话框也会出现。这是不希望的,因为我们导航到下一步保存表单数据。...,并在尝试离开未保存更改表单收到警告。

    5.8K20

    Shinyforms | 用 Shiny 写一个信息收集表

    当前功能 •表单结果保存到本地文件;•支持必填字段和可选字段(问题列表中使用 mandatory 参数);•仅用一行代码即可为 Shiny UI 和 server 添加表单;•可以同一 App 中包含多种不同形式...;•以干净和用户友好的方法来捕获和报告错误;•问题和表格数据采用 R 列表格式;•支持的问题类型:文本,数字,复选框;•能够多次提交同一表单表单信息列表中使用 multiple = FALSE 参数以禁止多次提交...);•支持管理员模式:如果在 URL 添加 ?...如果你想查看所有收集结果,则必须输入密码以验证您是管理员 (表单信息列表中使用 password 参数可设置密码);•支持更复杂的输入验证,当字段不满足某些条件,会给出错误提示消息(表单信息列表中使用...validations 参数);•可选加入“重置”按钮,用于重置表单中的字段(表单信息列表中使用 reset = TRUE 参数);•问题可包含提示文本,显示标题下方(问题列表中使用 hint

    3.9K10

    深入讲解 ASP+ 验证

    被引用的输入元素将修改其客户端事件,以便在每次输入更改时调用验证例程。 脚本库中的代码将在用户使用 tab 键各字段之间切换执行。...因为每次输入更改时或提交时会执行客户端验证控件,所以客户机上通常会评估这些验证控件两次或两次以上。请注意,提交后,仍将会在服务器对这些验证控件进行重新评估。...使用 Visible 或 Enabled 控制是否进行验证,应注意上述服务器的事件顺序。或者验证之前进行更改,或者更改之后重新验证。否则,它们的 IsValid 值不会更改反映到属性。...当用户使用 tab 键各字段之间切换,CustomValidator 不会更新,并且需要往返服务器一次以执行其验证。...以下是客户机和服务器使用 CustomValidator 的一个简单示例,只检查输入是否是偶数。

    5.3K10

    Ajax技术全解(3)

    Ajax技术全解 之三 Ajax适用场景 1.表单驱动的交互 传统的表单提交,文本框输入内容后,点击按钮,后台处理完毕后,页面刷新,再回头检查是否刷新结果正确。...如果在此案中应用Ajax后,结果就会有所改观: 初始化页面我们只读出它的第一级的所有数据并显示,在用户操作一级菜单其中一项,会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据,如 果再继续请求已经呈现的二级菜单中的一项...,再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据,以此类推……这样,用什么就取什么、用多少就取 多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新页面不用重载全部内容,只更新需要更新的那部分即可...6.普通的文本输入提示和自动完成的场景 文本框等输入表单中给予输入提示,或者自动完成,可以有效的改善用户体验,尤其是那些自动完成的数据可能来自于服务器端的场合,Ajax是很好的选择。...它实际是一个数据同步、操纵和传输的技术。对于可维护的干净的web应用,不使用Ajax来控制页面呈现是一个不错的主意。

    1.7K30
    领券