Redux-Form学习笔记
总结下使用Redux-Form的步骤,基本的Form使用我分为一下5步:
- 安装Redux-Form
npm install --save redux-form
- 创建reducer
import {reducer as formReducer} from 'redux-form'
const reducers = combineReducers({
// ... your other reducers here ...
form: formReducer
})
export default reducers
也可以参考redux-form官方文档的写法。
- 在组件中引入redux-form
import { reduxForm } from ' redux-form '
- 定义redux-form需要管理的字段
render(
const {fields: {name1,name2, name3}, handleSubmit} = this.props
return(
<form>
<input type='text' {...name1}/>
<input type='text' {...name2}/>
<input type='text' {...name3}/>
</form> ) )
- 调用reduxForm方法
Form = reduxForm({
form: 'formName',
fields: ['name1', 'name2', 'name3']
})(DataSetNewPolicyForm)
必须配置的是form,就是表单的名字。fields,是一个数组,值为需要管理的字段。
Redux-Form学习笔记的更多相关文章
- 【原】redux异步操作学习笔记
摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...
- [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- 笔记:FastAdmin 之 jQuery 选择器 $("[name$='[]']", form) 学习
笔记:FastAdmin 之 jQuery 选择器 $("[name$='[]']", form) 学习 $("[name$='[]']", form)这个是什 ...
- amazeui学习笔记--css(HTML元素3)--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- Django学习笔记(14)——AJAX与Form组件知识补充(局部钩子和全局钩子详解)
我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Django学习笔记(6)——Form表单
知识储备:HTML表单form学习 表单,在前端页面中属于最常见的一个东西了.基本上网站信息的提交都用到了表单,所以下面来学习Django中优雅的表单系统:Form 表单的主要作用是在网页上提供一个图 ...
- redux-form的学习笔记
redux是一种常用的与react框架搭配的一种数据流架构,而伴随着redux的出现,也出现了许多基于redux开源的第三方库,而redux-form就是其中之一的开源组件库,到今天我写下这篇笔记为止 ...
随机推荐
- transitionend的运用案例
transitionend事件代表着过渡动画结束后 原生的绑定方法 obj.addEventListener('transitionEnd', function(){ //do soming }) 我 ...
- 1_UILabel
// // ViewController.swift // 1_UILabel // // Created by Larry on 2016/12/7. // Copyright © 2016年 nf ...
- JS的prototype
初步理解: 在说prototype和constructor之前我们先得看几个例子. 1 2 3 4 function name(obj){ alert(obj)//"uw3c&quo ...
- 10款免费而优秀的图表JS插件
http://www.open-open.com/lib/view/open1406378625726.html http://www.ichartjs.com http://echarts.baid ...
- submit 后台运行代码
if EX_TABLE-matnr is not initial and EX_TABLE-KUNDE is not initial. wa_rspar-selname = 'MATNR' ...
- eclipse的安装与配置
eclipse的英文名是日蚀,一直很喜欢这个名字. 1.安装很简单,直接下载eclipse包,免安装的.解压后找到其执行文件,如图所示.
- Oracle 11G在用EXP 导出时,空表不能导出解决
Oracle 11G在用EXP 导出时,空表不能导出解决 (转)(.http://wanwentao.blog.51cto.com/2406488/545154 11G中有个新特性,当表无数据时,不分 ...
- easyui的getRows和appendRow方法使用结果记录
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Flask备注三(Context)
Flask备注三(Context) Flask支持不同的应用场景下,对应不同的local context(本地上下文环境),用来提供当前环境下的资源.lcoal context和全局变量以及局部变量最 ...
- Mongodb无法访问28107的问题
解压mongodb文件后,放到指定文件,最好别有空格.汉字之类的文件中 此时在mongodb文件夹下,建立一个 db 文件夹,此时执行启动命令,默认27017端口号可以打开,但是28017端口无法打开 ...