问题标签 [redux-form]

Redux 表单验证示例仅包括单个字段验证。

拥有一定数量的相同字段的列表，我如何对需要至少一个输入作为有效电子邮件地址的验证进行建模？

例如，对于由以下字段组成的给定表单：

• 用户 1，
• 用户 2，
• 用户 3，
• 特殊用户 4

如何编写需要始终设置特殊用户 4 以及前 3 个用户之一的验证功能？

抱歉，如果这已在其他地方得到解答，我是 Redux 初学者，我找不到任何相关内容。

我在将调度映射到 ReduxForm 时遇到问题。我像这样设置我的减速器：

然后像这样组合它们：

然后将 dispatch 映射到 props，如下所示：

然后我有一个表单组件，我将它包装在一个 reduxForm 中，如下所示：

但我收到一个错误：

将调度注入表单组件的最佳方法是什么？

我刚刚检查了 redux-form，但是我注意到的一件事是，每次按键都可以获得一个动作，甚至当你在字段之间切换时焦点和模糊。

我担心在更大更复杂的应用程序中每次按键都会触发一个动作，如果用户在较长的输入字段中快速键入，它可能会变得明显变慢。（更不用说 redux devtools 的 LogMonitor 在开发时会变得不必要地臃肿）

有没有办法禁用调度这么多动作？（通过节流或仅在切换字段或按下回车键时）

我正在尝试创建一个可以动态创建自己的输入的 redux 表单（使用 redux-form）。我无法弄清楚如何让 redux-form 了解已创建的新字段。是否可以在表单组件本身内动态更改 redux-form 传入的 fields 属性？我想错了吗？这是我正在使用的。

如何使用redux-form和 Fetch API 进行服务器端验证？文档中提供了“提交验证”演示，其中说推荐的服务器端验证方法是从 onSubmit 函数返回一个承诺。但是我应该把这个承诺放在哪里呢？据我了解 onSubmit 功能应该是我的行动。

this.props.addWidget 实际上是我的操作，如下所示。

如您所见，我使用 fetch API。我预计 fetch 会返回承诺，redux-form 会抓住它，但这不起作用。如何使其与示例中的承诺一起工作？

同样从演示中我无法理解 this.props.handleSubmit 函数中应该提供什么。Demo不解释这部分，至于我。

On the official pages and in the GitHub issues for redux-form there are more than one example of how to work with initialValues however I cannot find a single one that focuses on explaining how initialValues can be set in response to an asynchronous source.

The main case that I have in mind is something like a simple CRUD application where a user is going to edit some entity that already exists. When the view is first opened and the redux-form component is mounted but before the component is rendered the initialValues must be set. Lets say that in this example that the data is loaded on demand when the component is first mounted and rendered for the first time. The examples show setting initialValues based on hard coded values or the redux store state but none that I can find focus on how to set the initialValues based on something async like a call to XHR or fetch.

I'm sure I'm just missing something fundamental so please point me in the right direction.

References:

• Initializing Form State
• Handling form defaults
• What is the correct way to populate a dynamic form with initial data?

我正在使用 React 中的 Redux。我在程序中定义了动作和减速器。我想通过 onClick 事件改变状态，但它没有改变。

这是我的代码：

我尝试使用订阅方法并重新渲染，但它不起作用。

正如我从 react-form 文档中了解到的那样，您通常将form减速器放在减速器树的根部，redux-form 会form根据表单的名称将每个表单的状态放入此键中。

然而，这将导致一个奇怪的结构，即某棵树的表单数据在表单键下，而不是与与其相关的其他状态数据。在此示例中，应用程序存储了来自服务器的可能帐户类型列表，从逻辑上讲，这些帐户类型应与注册表单本身进行分组。然而，对于 redux-form，它们将位于完全不同的子树中：

我宁愿像这样更有条理的树：

这对 redux-form 或任何其他 redux 库是否可行？

我正试图围绕redux、react-redux和redux-form。

我已经建立了一个商店并从 redux-form 添加了减速器。我的表单组件如下所示：

登录表单

这按预期工作，在redux DevTools中，我可以看到商店如何在表单输入和提交表单时更新，login动作创建者调度登录动作。

我将redux-thunk中间件添加到了 store 中，并按照redux docs for Async Actions中的描述设置了用于登录的操作创建者：

authActions.js

同样，在 redux DevTools 中，我可以看到它按预期工作。在LoginFormdispatch(login(formData))中调用时，首先调度操作，然后是or 。将向商店添加一个属性，并将删除此属性。（我知道这可能是我可以使用重新选择的东西，但现在我想保持简单。onSubmitLOGIN_REQUESTLOGIN_SUCCESSLOGIN_FAILURELOGIN_REQUESTstate.auth.pending = trueLOGIN_SUCCESSLOGIN_FAILURE

现在，在我读到的 redux-form 文档中，我可以返回一个onSubmit更新表单状态（submitting，error）的承诺。但我不确定这样做的正确方法是什么。dispatch(login(formData))返回undefined。

我可以用一个变量来交换state.auth.pending商店中的标志，比如请求state.auth.status的值、成功和失败（同样，我可能会为此使用 reselect 或类似的东西）。

然后我可以订阅商店onSubmit并处理如下更改state.auth.status：

但是，这个解决方案感觉不太好，我不确定当应用程序增长并且可能从其他来源分派更多操作时它是否会始终按预期工作。

我见过的另一个解决方案是将 api 调用（返回一个 promise）移动到onSubmit，但我想将它与 React 组件分开。

对此有何建议？

我正在尝试构建一个表单，如果 redux-form 验证通过，它将像任何其他 HTML 表单一样提交。如果验证失败，我希望它触及所有字段并阻止提交。

所以我需要：编写我自己的 onSubmit 函数，如果验证失败，它将触及字段。我正在尝试：

这个实现：

产生此错误：TypeError: Cannot read property 'indexOf' of undefined不在调用touch. touch我在追查touch.

如果验证失败，使用内置的 handleSubmit 将获得正确的触摸行为，但是如果验证也通过了，我无法弄清楚如何让它像普通的 HTML 表单一样提交表单，而无需做这样的骇人听闻的事情：

这确实有效，但似乎是一个不好的方法。