如何使用react-redux-form填充动态默认值

在这个实时编码/文章教程中，您将学习如何使用React框架和Redux在网页上创建自动填充的输入。

首先，react-redux-form与redux-form他们是相似的，但不一样。这个问题可能也困惑着很多人，就算使用搜索引擎也未必搜到合适的答案。其次，我们正在讨论由Redux驱动的表单。预填充默认值应该像填写Redux状态一样简单。对？那么，表单就是在你自己的reducer中生存的，你没有直接的访问权限。他们使用一些内部的状态来标记输入，比如dirty，focused，等等。

一个简单的react-redux-form

这是一个使用react-redux-form构建的简单表单。它有两个输入字段。提交时，它会将您的值输出到控制台。

我们的表单从一个model和一个Redux的store开始：

initialUserState描述用户的形状，combineForms创建一个特殊的reducer。reducer负责为我们的表单存储值和驱动UI。

你可能认为你可以向initialUserState添加默认值，我会告诉你这个想法是可以的。但是坚持这个想法之前，我们首先确保要理解react-redux-form。

表单本身作为React组件使用来自react-redux-form的元素。

handleSubmit是我们在用户通过按提交按钮或按Enter键提交时调用的函数。在我们的例子中，它将值输出到控制台。render方法使用了一个来自react-redux-form的组件。

它配备了所有必要的Redux接线，所以我们不必担心这一点。我们使用该组件的子项来定义它如何呈现。在我们的例子中，这是两个div，一些标签，一个提交按钮和两个组件。

组件带有我们的表单所需的所有接线工作。他们将处理焦点，模糊，默认值，匹配到正确的模型部分，等等。我们不想手动担心的一切。

静态与动态默认值

回到那个明显的想法。为什么你不能只使用initialUserState来定义默认值？这个想法是可以的，但是它需要你的默认值是静态的。

我解释一下是如果你事先知道它们，你的默认表单值是静态的。就像当你写代码时一样。这是非常罕见的。如果你正在编辑一个编辑表单呢？在用户选择正在编辑的内容之前，您无法知道表单的值。

用react-redux-form填充动态默认值

以下是你要如何做到这一点的：

react-redux-form带有一堆model动作，actions和reducer。actions是它可以用来做特别的事情，比如填充你的表单。

点击“更改默认值”按钮来选择一个新的随机用户。它的名字将填充表格，你可以编辑它到你的store的内容。

为了做到这一点，我们使用了一个名为actions.merge的Redux动作生成器。它让我们可以将表单model与一组新的默认值进行合并。

首先，我们将UserForm组件连接到Redux。

通常的东西。使用connect连接Redux，从状态中我们不需要任何道具，我们使用mapDispatchToProps来添加一个叫做setDefaultUser的调度函数。

setDefaultUser是actions.merge的一个curry应用程序。这需要一个值对象，并将其与我们的store中的用户model合并。

我在这个例子中把它连接到一个onClick回调，所以你可以多次尝试。

您可以使用的另一种方法是在componentDidMount中调用此操作。这给了你真正的默认值 - 一旦用户看到它，就填充一个表单。