如何使用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中调用此操作。这给了你真正的默认值 - 一旦用户看到它,就填充一个表单。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180130A1DSAG00?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区