前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React:redux-form 应用示例

React:redux-form 应用示例

作者头像
WEBJ2EE
发布2019-07-19 11:47:41
6770
发布2019-07-19 11:47:41
举报
文章被收录于专栏:WebJ2EEWebJ2EE

上一篇提到过,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/

精选文章推荐

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-07-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebJ2EE 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 精选文章推荐
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档