专栏首页WebJ2EEReact:redux-form 应用示例

React:redux-form 应用示例

上一篇提到过,React 的表单管理方案有两类:

  1. 基于 redux 的全局数据管理(redux-form
  2. 基于 react 的局部数据管理(rc-form)

下面给出几个用 redux-form 实现的表单示例;

1. redux-form入门

效果:

代码:

2. 给表单添加校验

redux-form 支持两类表单校验:

  • form 表单整体校验;
  • form 表单项独立校验;

效果:

代码:

3. 给表单整体赋值

redux-form 允许我们通过 initialValues 给表单整体赋值;

效果:

代码:

4. 标准化用户录入

效果:

代码:

5. 从State中获取表单状态

效果:

代码:

API:

redux-form 提供了一堆 selector,便于我们从state中获取 form 表单的各种状态数据...

参考:

https://redux-form.com/7.4.2/docs/api/selectors.md/

6. 用Action触发表单动作

效果:

代码:

API:

redux-form 提供的更多 action 接口,可以参考:

https://redux-form.com/7.4.2/docs/api/actioncreators.md/

精选文章推荐

本文分享自微信公众号 - WebJ2EE(WebJ2EE),作者:WEBJ2EE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【编译技术】:解读 Babel AST Format——05

    The Babel parser generates AST according to Babel AST format. It is based on EST...

    WEBJ2EE
  • 【React】:Refs

    Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

    WEBJ2EE
  • React:Redux怎么处理异步?

    redux-thunk 中间件允许你 dispatch 一个函数(即:thunk),异步逻辑就放在这个函数中处理;

    WEBJ2EE
  • python技巧分享(九)

    songleo
  • 在腾讯云购买时安装宝塔面板

    霹格软件
  • Python 彩色命令行输出

    王云峰
  • 万有周期

    周五晚上跟几个好朋友聚餐,期间聊到家谱的事,其中一个我们称呼为龙哥的兄弟说他家的家谱记录到距今2000年左右的祖辈们,顿时觉得吃惊和奇妙。

    麦时
  • TRTC SDK开发应用大赛决赛已开放直播预约,快上车!

    TRTC (Tencent Real-Time Communication) SDK开发应用大赛,是腾讯云面向全球致力于实时音视频互动和应用场景开发的合作伙伴及...

    Grace
  • Python 2和Python 3的区别?

    Python 社区,有这么个怪问题:“学 Python 到底是学2还是学3?”这个问题就像月经一样每隔断时间就出现在你面前,也成了很多初学者的选择困惑,这个问题...

    一墨编程学习
  • Python列表、元组、字典操作

    #!/usr/bin/python # -*- coding: UTF-8 -*- list1 = [1,2,'a', 'b'] seq = (1,4,5) ...

    苦咖啡

扫码关注云+社区

领取腾讯云代金券