如何在redux中管理此表单？
在Redux中管理表单可以通过以下步骤实现：
- 定义表单的初始状态：在Redux的store中创建一个初始状态对象，包含表单中的各个字段及其初始值。
- 创建action：定义用于更新表单字段值的action，可以使用action creator函数来创建这些action。例如，可以创建一个名为
updateFormField的action，接受字段名和字段值作为参数。 - 创建reducer：在Redux的reducer中处理表单字段值的更新。当接收到
updateFormFieldaction时，reducer应该返回一个新的状态对象，其中更新了对应字段的值。 - 连接表单组件：使用React-Redux库中的
connect函数将表单组件连接到Redux的store。通过mapStateToProps函数将表单组件所需的状态映射到props，以便在组件中使用。同时，通过mapDispatchToProps函数将更新表单字段值的action映射到props，以便在组件中触发更新。 - 在表单组件中使用Redux状态和操作：在表单组件中，通过props获取Redux中的表单状态和更新操作。可以使用
mapStateToProps函数映射的状态来初始化表单字段的值，并使用mapDispatchToProps函数映射的操作来更新表单字段的值。 - 监听表单提交事件：在表单组件中，监听表单的提交事件，并在提交时触发一个action，将表单数据传递给Redux的reducer进行处理。
通过以上步骤，就可以在Redux中管理表单，实现表单字段值的更新和提交。在实际应用中，可以根据具体需求进行扩展，例如添加表单验证、处理异步提交等功能。
腾讯云相关产品推荐：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 云存储（对象存储）：https://cloud.tencent.com/product/cos
- 人工智能开放平台：https://cloud.tencent.com/product/ai
相关·内容
3回答
我成功地在我的最小角度4样板中实现了@angular-redux/store和redux。我确实理解Redux循环背后的想法，但我很难通过简单的计数器增量按钮示例。
目前，我已经构建了一个简单的登录表单，作为一个组件，需要从我的API中获取一个JWT令牌。我不想让它变得太复杂，所以现在我不想在存储中存储表单状态，因为表单组件不会影响其他组件，对吗？
因此，当我点击submit按钮时，我的login.component.ts将处理对API的验证和http请求。但是表单提交也是一个动作，那么Redux什么时候来这里玩呢？
浏览 0提问于2017-08-12得票数 13
回答已采纳
2回答
我使用了react，redux和redux-saga。现在的问题是，我想要跟踪所有用户与表单的交互，比如onfocus时间戳，他输入的内容以及他提交的时间。我想要一个通用的组件，应该为我做以上所有的事情。如何做到这一点。提前感谢
浏览 2提问于2018-03-10得票数 0
我正在开发一个react web应用程序，为了节省时间，我的公司购买了一个管理仪表板。在这个面板中，他们使用redux来处理状态，并将所有设置参数存储到redux中。
但实际上，我对在每个用例中使用readux感到困惑！
我的所有请求和状态都是基于组件的，并不是全局的，这些都不是在此应用程序的其他组件中使用的必要内容！
例如，要加载游戏列表，我有以下代码：
componentDidMount() {
this.setState({
loading: true
});
http._GET('/game/getAllGames')
.
浏览 2提问于2019-06-19得票数 5
我正在学习react和redux，并希望创建具有多个字段的表单。因此，由于表单数据是其他组件正常工作所必需的，所以我想将表单状态保存在redux存储中。但是，我假设的是，由于用户每次单击键盘上的按钮时，都会将新的操作分派到存储。问题是它会影响我的应用程序的性能吗？同样，是否可以在redux store中保持表单状态，以及当我们每次单击键盘上的按钮时，都会将新的操作分派到store？这不会影响性能吗？
浏览 1提问于2020-06-08得票数 1
2回答
是否可以在异步存储中存储诸如登录为客户、经理、员工、登录id或更多信息，以便根据这些值呈现UI。
以及何时使用异步和何时使用redux。或者，如果我使用Async管理我们的工作，那么为什么我必须使用redux。因为到目前为止我还不知道redux。因此我以某种方式通过设置和获取异步值来管理渲染。
请帮帮忙谢谢。
浏览 1提问于2021-09-06得票数 0
2回答
我想在使用redux进行ajax调用之后填充一个表单。
我的案子很简单：
我有一个简单的用户表单(目前只有一个文本字段)，它是一个与connect()绑定到状态的react视图。
我调用rest来获取用户。
当api调用完成后，将与用户一起分派一个操作。
还原器与用户一起更新存储状态。
我想用检索到的值填充/更新表单。
解决方案1:
如果我像这样设置道具的值：
const Field = ({ field, onFieldChange, value }) => (
<input
value={value}
onChange={(e
浏览 11提问于2016-09-20得票数 3
回答已采纳
1回答
好的，我想在我的注册表单中处理输入开头的空格，我已经通过提供redux-form reducer插件实现了这一点：
export default function(cookies, server) {
return combineReducers({
auth: auth(cookies, server),
reduxAsyncConnect,
alert,
programs,
exercises,
routing: routerReducer,
form: form.plugin(formPlugin),
profile,
浏览 0提问于2017-05-24得票数 0
1回答
我正在使用react-redux，并尝试预先填充一个表单，如果它之前已经填好了值。因此，有一个api端点，我正在获取预先填充的表单值(当前存储在状态中)，如下所示。
只需要存储我从componentDidMount调用的api中的数据，并将其存储在redux存储中。谢谢!
浏览 1提问于2021-11-23得票数 0
如何在Redux表单中使用React的多重选择，在这里我还可以创建新的选项，该选项将以redux表单状态存储。Redux表单文档没有带有新标记创建选项的示例。
浏览 4提问于2017-12-12得票数 0
回答已采纳
我在redux中有以下数据。
这可以使用
this.props.user
我有一个显示这些数据的表单。可以更改和更新这些值。
<Form>
<FormGroup>
<Label for="email">Email</Label>
<Input type="email" name="email" value={this.props.user.email} disabled />
</Fo
浏览 0提问于2019-02-20得票数 0
3回答
上下文：--我想创建一个允许用户填写表单并提交它的模式。在POST请求完成后，模式应该关闭。有多个模式具有相似的行为，但形式不同的内容，所以我需要使它可重用。表单中的数据不在前端应用程序的其他地方使用，只存储在后端。
相关技术栈： react，redux，react redux，redux-saga，无SSR
选项1:在redux中存储模式和请求状态
开启和提交模式将触发以下一系列事件：
开启模态的调度动作
用数据提交表单的发送操作
发送POST请求提交表单，将redux加载状态设置为true
如果成功，将redux加载状态设置为false，将“模式打开”状态设置为false。
浏览 10提问于2020-06-06得票数 1
回答已采纳
场景: FiledArray被放在Redux表单中，它包含五条记录。我删除了2条记录，并尝试更新数据库中已删除的记录in。
问题:提交redux表单时无法获取已删除记录的详细信息。
可以通过reducer更新redux-form状态吗？如何继续获取我删除的记录id？
浏览 1提问于2017-10-31得票数 0
1回答
我们有一个不常见的情况，由于多种因素的汇合，我们希望外部应用程序将安全的表单数据提交到单个页面应用程序中。数据流如下所示
www.foo.com -包含表单的静态网站
spa.foo.com - react/redux中的单页面应用程序
www.foo.com包含
<form action="https://spa.foo.com/">
username: <input type="text" name="username></input>
password: <input type="pas
浏览 2提问于2018-01-20得票数 2
我创建了一个名为“表单页”的新内容类型，其中所需的字段是对联系人表单的引用。所以在页面上，你会有一个身体，在这个身体下面，联系形式本身。我似乎想不出如何在页面上显示表单。我要么得到一个链接，要么打印出联系人表格的系统名称。我该怎么做？
浏览 0提问于2016-10-11得票数 1
回答已采纳
我是react上的新手。我正在使用redux开发react应用程序。我有一个表单(我正在使用redux- form )，通过它我可以保存数据或编辑数据。我的问题是，在编辑模式下，我使用componentWillReceiveProps填充数据。并且填充完美，现在当我试图清除表单上的任何字段时，它会再次填充。
componentWillReceiveProps(nextProps){
this.props.dispatch(initialize('NewProject', nextProps.project.project[0]));
}
如果有任何帮助，我将不胜感激
浏览 2提问于2017-03-29得票数 0
我有一个React Redux应用程序，它使用redux-form。表单由事件动态呈现。当它呈现时，我得到一个错误的Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(FormCreate))"
为了修复错误，我显式地将一个存储传递到表单组件中，如下所示
render(<FormCreate store={store}/>, document.getElementById('form'))
但redux-form自
浏览 2提问于2017-07-11得票数 0
几天甚至几个星期(阅读文章、观看视频/演讲)，我正试图理解如何正确地使用Redux和，但我真的很难完全理解这个概念。也许我的usecase不太适合Redux，或者我只是忽略了一些显而易见的东西。
我想找到的是一个大型应用程序的良好基础。我对React很有信心，但是Redux (因此，redux-form)似乎是一个很好的解决方案，解决了我没有的问题。尽管如此，每个人都称赞Redux (或通量)概念，所以我想确保我没有遗漏一些东西。
好的，这个应用程序是高度database-driven的，所有的数据都可以在浏览器中方便地获得(它是一个离线的第一个应用程序)。
我使用的浏览器内数据库非常类似于加
浏览 1提问于2016-10-03得票数 0
在解决了一些问题之后，我坚持将DatePicker数据发送到表单。
我找到了两种使用redux-form创建DatePicker组件的方法。
<Field
name="startDate"
autoOk={true}
floatingLabelText="startDate"
component={(startDate) => {
return <DatePicker {...startDate} />;
}}
onChange={(event, date) => {console.log(date)
浏览 0提问于2016-06-09得票数 6
我目前正在做一个使用Redux和Redux-saga的React项目。我想知道如何在成功完成异步api调用后重置窗体。使用redux和redux saga我是在使用
resetform({})
但它会在api成功执行之前立即重置表单
浏览 3提问于2020-01-07得票数 0
我是新的反应，我试图通过遵循Udemy教程来制作一个小应用程序。应用程序包含一个表单。当我将库导入到我的项目中时，我得到了下面的控制台错误。
package.json
"dependencies": {
"axios": "^0.18.0",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "16.3.2",
"
浏览 0提问于2018-05-14得票数 3
1回答
我正在尝试加载一个Redux表单，其中预先填充了来自商店的值。
目前，我可以直接从还原器填充redux表单，但是在提交表单时，它只接受可单击元素的数据以生成有效负载。
然而，我能够从减速机获得数据到存储。我需要用存储值初始化redux表单。
是否有任何最佳方法来初始化表单元素和存储中的值，并将整个模型作为有效负载提交？
兹随函附上复制件.
Redux表单：-
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from '
浏览 1提问于2018-05-10得票数 1
我有一个元素列表和一个表单(用于创建/更改元素)。使用react，我将其表示为
...
render() {
return (
<div>
<List/>
<Form/>
</div>
)
}
...
每个list元素都有一个change按钮。单击它，获取元素字段值。如何使用元素值填充表单字段(不使用Redux)？
浏览 4提问于2017-04-19得票数 0
回答已采纳
我正在从头开始一个新的项目，我决定使用Django和React。但是，当我说react时，有许多开发人员使用redux作为状态管理的基本库，但我认为redux在代码中增加了很多复杂性。因此，我搜索了一个替代方案，我发现一些开发人员根本没有使用redux，而是使用GraphQL +阿波罗作为替代。我还在Github上找到了这个漂亮的存储库，它使用了Django with React，但它根本没有使用redux。
链接到该GitHub存储库的一个GitHub文件-
所以，这是一个好主意，使用阿波罗+ GraphQL而不是redux?
浏览 2提问于2020-09-20得票数 0
任何能够获得redux表单和redux表单的redux表单自动完成工作的人都可以管理数据吗？
浏览 1提问于2020-05-01得票数 0
回答已采纳
1回答
我想通过Redux-Form提交表单，其中有一个图像上传域以及其他文本域。我尝试了以下图像上传方法，问题是每当我尝试上传图像时，表单都会重新呈现。我怎样才能以正确的方式做这件事？另一件事是如何将整个表单数据(包括上传的图片)发送到后端？我在这里使用了react、redux-form和material-ui
<Box className={classes.controlTitle}>
Upload Organization Logo
</Box>
<Field
浏览 0提问于2020-11-01得票数 0
2回答
我开始学习NodeJS + MongoDB。在那之前，我学习了React + Redux。据我所知，MongoDB是否取代了Redux？如果没有，哪些数据应该存储在Redux中，哪些数据应该存储在MongoDB中？
浏览 6提问于2022-03-23得票数 0
回答已采纳
我使用React/Redux和WP REST构建了一个完全工作的WordPress主题作为SPA，但我不需要处理表单，并且发现与work兼容，但是我无法确定从哪里开始--我是不是遗漏了一些完全显而易见的东西？
我已经在管理区域中添加了一个表单，但是现在我看不到API中用于将表单数据发布到的任何端点。有没有人有这方面的经验，并能指出我的正确方向？
谢谢您:)
浏览 3提问于2016-12-13得票数 3
请帮助理解react-final-form的api文档，
我们已经将redux-form迁移到了redux-final-form。在我的应用程序中，我们使用formvalueselector api来获取表单值。请帮助在react-final-form中获得更纤细的api
要求是通过属性名称获取表单值
浏览 28提问于2020-05-06得票数 1
在提交值时禁用整个表单的redux表单方法是什么？？
以及如何在清除窗体字段中的所有值后重新启用整个表单？
我知道html的方式是通过fieldset disable进行的，但我想知道执行这些操作的redux表单方法。
浏览 0提问于2018-05-23得票数 1
回答已采纳
1回答
我在用redux表格库。当我只是填充表单时，在redux存储中，我可以看到创建了新的字段：" form“字段，包括所有的键值对。如果我更改任何值，键-值对也会发生变化。
如何从这个“表单”字段中获取所有键值对？
浏览 0提问于2018-08-28得票数 3
回答已采纳
2回答
我使用在基于web的应用程序中构建表单。我也在用Redux。
在这种情况下，我需要使用这些表单编辑信息，而不仅仅是输入信息。这使我认为，我需要确保表单或输入成为呈现来自Redux存储的值的受控组件--或任何真正的状态数据。
我怎样才能做到这一点？我在他们的文件里找不到这个。
编辑
库react-form现已停用，取而代之的是其他库，如informed或react-final-form。
浏览 0提问于2018-09-20得票数 1
回答已采纳
我目前正在构建一个电子商务react应用程序，用户可以在其中相互出售二手物品。从用户的角度来看，用于创建和管理广告的典型工作流可以看起来是这样的:用户创建广告->，广告被上传到数据库->，用户从数据库获取他的广告，并在列表->中查看它们，他决定改变广告中的某些东西，点击它，并获得具有可编辑的广告数据(从数据库获取)的表单。
我这里的问题是，我真的很困惑在redux中保存什么？redux的目的是简化数据流，多个组件中需要的数据应该存储在那里。但是，如果我总是从数据库获取所需的数据(例如，当用户获取他的广告列表或可以编辑的广告数据时)，那么redux不是一个不必要的步骤吗？
我希
浏览 0提问于2020-03-23得票数 2
我已经开始学习Redux与React，我陷入了我的项目的一部分，这是一个电子商务商店，当用户点击添加到购物车时，我想要更新数量并将文章添加到袋子中。我已经为其他功能实现了Redux，但是我找到了ReduxToolkit问题的解决方案，但我还没有学到这个解决方案
如何将使用redux工具包编写的代码转换为Redux？
import { createSlice } from "@reduxjs/toolkit";
const cartSlice = createSlice({
name: "cart",
initialState: {
produc
浏览 2提问于2021-10-12得票数 0
1回答
Label label1 = new Label(container, SWT.NULL);
label1.setText("Enter the Password ");
text1 = new Text(container, SWT.BORDER | SWT.PASSWORD);
text1.setText("");
text1.addKeyListener(new KeyListener() {
public void keyPressed(KeyEvent e) {
}
浏览 1提问于2010-04-27得票数 3
回答已采纳
我正在尝试使用npm安装redux-form &redux-form-material，但它显示您需要首先安装对等依赖项，这是我正在做的，但这些模块在节点模块文件夹下仍然不可用。
我作为管理员在git中运行‘administrator’，但它显示为根/管理员运行。然而，当我使用‘’运行时，我没有得到这种奇怪行为的原因。然而，在使用-g之后，这些模块仍然没有安装--模块的错误出现了。
环境？
节点版本- 8.0.0 (甚至尝试使用v6) NPM-5.4.0 Redux form -latest OS- Windows 10
Logs-
$ npm安装redux-表单npm错误！
浏览 5提问于2017-09-18得票数 0
我有很多表单，并希望逐步地，一个接一个地，将我的表单从redux-form的5版本迁移到6版本。我已经知道了如何管理依赖项，但是如何将两个版本的缩减程序与一个存储密钥form组合在一起呢？
浏览 29提问于2017-02-21得票数 2
回答已采纳
2回答
我有一个redux表单，其表单字段为FieldArray。从状态初始化redux表单是相当的，但是我的表单有字段列表()，并且没有初始化FieldArray表单的文档。
问题似乎是由于字段名(例如：members[0].lastName, members[0].firstName等)，我尝试过手动传递这些键，但仍然没有表单初始化，请帮助。
浏览 2提问于2017-01-12得票数 2
1回答
在过去的两周里，我一直在为Django的注册重复而苦苦挣扎。我正在使用文档中提供的模板，并做了一些更改，比如添加易碎的表单和更改按钮等，但问题是这些更改都没有显示在或任何其他链接上。我使用的是Django注册redux 1.4，Django 1.8，python 2.7.10
浏览 2提问于2016-08-30得票数 0
1回答
我有一个react应用程序，它使用redux状态管理工具和本地本地状态管理，即react (组件/容器)状态。假设有一个表单组件，其数据存储在react状态中。API调用是通过sagas进行和处理的，sagas相应地更新Redux。如何更改响应状态，例如将表单状态键更改为loading: false，或者通常如何在saga接收到来自API调用的数据后使用数据更新表单(受控窗体或不受控制的表单)。对于受控表单，将有一个容器组件来管理该表单的道具，但是如何更新容器的状态呢？我不想同时将数据存储在redux和redux状态，特别是如果数据是用于本地存储的，而不是redux存储的话。
如果我使用get
浏览 0提问于2019-07-09得票数 1
回答已采纳
在Redux-Form中，似乎您将onSubmit作为道具传递给您的form组件，然后form组件将在其form标记上拥有一个onSubmit={handleSubmit}属性。这是有意义的，因为Redux-Form将收集所有的表单数据，并将其作为单个对象参数传递给onSubmit函数。但是，如果同一父组件有多个表单组件子组件，会发生什么呢？您只能将一个onSubmit函数传递给两个表单子对象，即使它们需要对提交的信息执行不同的操作。让多个表单有多个父级是唯一的解决方案吗?这样你就可以传入不同的onSubmit了吗？对我来说，这似乎不是很枯燥。
浏览 0提问于2016-10-17得票数 0
25回答
我有一个问题，使用反应-选择。我使用redux表单，并使我的redux组件与redux表单兼容。以下是代码：
const MySelect = props => (
<Select
{...props}
value={props.input.value}
onChange={value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.
浏览 10提问于2017-04-19得票数 166
回答已采纳
在redux-form Simple Form example ()中，我们可以看到如何使用props redux-form disabled：<button type="submit" disabled={pristine || submitting}>Submit</button>控制按钮的生成状态。
在我的例子中，submit按钮位于表单之外的另一个组件中，我使用的方法类似于远程提交示例()
import React from 'react'
import { connect } from 'react-redux'
浏览 1提问于2017-01-20得票数 0
我最近开始在一个React项目中使用Redux-Saga，因为它对我来说是新的，我想了解它是如何工作的。我也开始使用Formik，因为它在React应用程序中管理表单的流行程度似乎已经超过了Redux-Form。现在，我理解了丹·阿布拉莫夫的理由：“使用React实现对应用程序无关紧要的短暂状态，并且不会以复杂的方式发生变化。”
但这似乎与Redux-Saga文档中的SOMETHING_REQUESTED -> apiCall -> SOMETHING_SUCCESS or SOMETHING_FAILURE模式不一致。例如，如果我有一个表单，它分派了saga用来执行异步请求的一些
浏览 0提问于2019-03-19得票数 9
我正在构建一个react-redux，redux-form应用程序。我将有一个页面，我想在其中呈现一个从服务器动态拉取选项列表的选择框。我的问题是如何在react-redux应用程序中构建这个简单的表单。
这个选择表单元素应该由react-redux-form提供支持吗？我应该使用redux/reducers来查询和存储支持下拉选项的状态吗？还是说这太夸张了？
浏览 6提问于2017-05-31得票数 0
1回答
我试图创建一个ES6模块的登录表单使用汇总和反应-redud。
我使用以下配置进行汇总：
const plugins = [
// Unlike Webpack and Browserify, Rollup doesn't automatically shim Node
// builtins like `process`. This ad-hoc plugin creates a 'virtual module'
// which includes a shim containing just the parts the bundle needs.
{
浏览 1提问于2017-09-30得票数 0
回答已采纳
3回答
我在node中构建了一个简单的CRUD应用程序，并在Express中完成了rest API的创建。我现在正在寻找添加前端功能，并希望使用react + redux作为学习练习。然而，似乎所有与此相关的教程都使用Redux直接访问数据，而不是通过内部API进行接口。
我的问题是，这是使用redux构建SPA的正确方法吗？我的印象是，最好将前端与后端分开，这样我就可以，例如，构建一个iPhone应用程序，而不必重新构建后端。
提前谢谢。
浏览 2提问于2016-02-10得票数 11
回答已采纳
我使用Redux-表单7.3.0。我正在尝试在另一个组件中获取我的表单的值。我在 of Redux表单中阅读了指令，但没有工作。
this is the code of my componenet:
import React from 'react'
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-fo
浏览 1提问于2018-03-31得票数 4
回答已采纳
2回答
提交成功后关闭表单模式
、、、、
我正在使用Formik、Material-ui、Redux和Redux-saga我在material中有一个表单-ui <Dialogue/>
在提交表单时，我会触发提交请求操作，然后由saga捕获该操作。saga进行api调用并调用成功操作。
模态状态isOpen位于组件状态内部
我需要在表单提交成功后隐藏模式。
我该怎么处理呢？
注意:我使用的是React Hooks。
浏览 4提问于2019-07-30得票数 3
1回答
向表单下拉选项发出异步请求的正确方式是什么？
有大量的下拉选项，比如城市。我们是否希望将这些存储在状态中？
通常，我们会通过Redux store创建Redux操作，请求"cities“并使用"cities”选项更新状态。MapDispatchToProps并从componentDidMount调用Redux操作。
componentDidMount = () => {
this.props.fetchCitiesOptions()
}
MapStateToProps将包括options: cities，它可以覆盖1000个城市或更多城市，并且只在1个表单上使用。我们
浏览 0提问于2017-04-11得票数 0
我最近发现了。一切似乎都很好，但我遇到了一个问题，我找不到任何解决办法：
编辑现有的记录时，所有输入字段都是空的。当提交空表单时，所有属性都为“空”。
这是我的密码：
// src/users.js
export const UserEdit = (props) => (
<Edit title="Edit User" {...props}>
<SimpleForm>
<DisabledInput label="Id" source="id" />
<TextIn
浏览 0提问于2018-09-09得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
