reduxForm中反写数据在输入框中,数据是从别的模块拉取

// 编辑应用表单
class EditCode extends React.Component {
constructor(props) {
super(props)
}
// 取消编辑
handleBack=()=>{
window.history.go(-1);
}
// 确定编辑
handleFormSubmit=()=>{
const { handleSubmit } = this.props;
handleSubmit()
} render() {
const { handleSubmit, touched, error, pristine, reset, submitting, loading, initAppData } = this.props;
return (
<div className="defence-detail" onSubmit={handleSubmit}>
<div className='tc-panel'>
<div className='tc-panel-bd'>
<div className='param-box'>
<div className='param-bd'>
<ul className='form-list'>
<li>
<div className='form-label required'>
<label htmlFor='Name'>应用名称</label>
</div>
<div className="form-input">
<Field name='Name' placeholder='必填' component={inputAppName}/>
</div>
</li>
<li>
<div className='form-label required'>
<label htmlFor='Developer'>应用开发商</label>
</div>
<div className='form-input'>
<Field name='Developer' placeholder="必填" component={inputAppDeveloper}/>
</div>
</li>
<li>
<div className='form-label'>
<label htmlFor='Desc'>应用描述</label>
</div>
<div className='form-input'>
<Field name='Desc' component={textareaAppDescription}/>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className='tc-panel-ft'>
<Button onClick={()=>this.handleFormSubmit()} loading={loading}> 确认 </Button>
<Button className='weak' onClick={()=>this.handleBack()} disabled={this.props.disabled}> 取消 </Button>
</div>
</div>
</div>
)
}
} EditCode = reduxForm({
form: 'editAppForm',// 这是你的表单名称
validate,
enableReinitialize:true,
keepDirtyOnReinitialize:true,// 这个值表示重新初始化表单后,不替换已更改的值,可以用clear来测试
})(EditCode) EditCode = connect(
state => ({
initialValues: state.appManage.initAppData, //appManage是你需要拉取数据的模块 你需要填充的数据initAppData }), )(EditCode)
export default EditCode

官网链接https://redux-form.com/6.7.0/examples/initializefromstate/

上面的 initialValues 接受的是一个obj对象,默认填充数据会根据上面的<Field>中的name对应的属性值进行填充

React中redux表单编辑的更多相关文章

  1. React中的表单应用

    React中的表单应用 用户在表单填入的内容,属于用户跟组件的互动,所以不能用this.props读取. var Input = React.createClass({ //初始化组件数据 getIn ...

  2. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

  3. React中的表单元素

    在web应用开发当中,表单还是很重要的元素. 应用表单组件有:文本框(input.textarea).单选按钮和复选框.Select组件. 文本框:文本框的状态改变即文本框中的内容的改变.此时的sta ...

  4. HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法;让文本域前面的内容显示在左上角,居中

      HTML中让表单input等文本框为只读不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input text的内容,中国两个字不可以修改   有时候,我们希望 ...

  5. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  6. vue中的表单异步校验方法封装

    在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...

  7. jqgrid 实现行编辑,表单编辑的列联动

    这个问题的场景相信大家都遇到过,比方有A,B,C三列,B,C列均为下拉框.可是C列的值是由B列的值来决定的.即C列中的值是动态变化的,变化的根据就是B列中你选择的值. 本文给出的是一个有用,简易快捷的 ...

  8. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  9. MVC中处理表单提交的方式(Ajax+Jquery)

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

随机推荐

  1. 一行代码搞定 R 语言模型输出!(使用 stargazer 包)

    引言 使用stargazer包可以将 R 构建的模型结果以LATEX.HTML和ASCII格式输出,方便我们生成标准格式的表格.再结合rmarkdown,你就可以轻轻松松输出一篇优雅的文章啦~本文“使 ...

  2. DES算法原理完整版

    1.所需参数 key:8个字节共64位的工作密钥 data:8个字节共64位的需要被加密或被解密的数据 mode:DES工作方式,加密或者解密 2.初始置换 DES算法使用64位的密钥key将64位的 ...

  3. NBU将RAC数据库恢复到单机

    恢复的过程和(https://www.cnblogs.com/abclife/p/5687993.html)差不多.但是,具体过程有些不同.如果按照之前的恢复方式,在run语句中同时运行restore ...

  4. [20170713] 无法访问SQL Server

    背景: 朋友的环境第二天突然访问不了SQL Server,远程SQL Server用户无法登陆,但是本地SQL Server用户登录正常. 报错: 用户XX登录失败(MicroSoft SQL Ser ...

  5. Linux 安装Zookeeper集群

    1.解压,配置环境变量 export ZOOKEEPER_HOME=/usr/local/zkexport PATH=.:$HADOOP_HOME/bin:$ZOOKEEPER_HOME/bin:$J ...

  6. mybatis generator 为数据库保留字段 转义

    为order 添加转义符号“ ` ” `order` <property name="autoDelimitKeywords" value="true"& ...

  7. 通过灰度线性映射增强图像对比度实现PS中的色阶

    通过灰度线性映射增强图像对比度 Halcon中如何通过灰度线性映射增强图片对比度呢?不急,我先讲点其他的. 如果你用过Photoshop,那么想必对增强图像的对比度很熟悉.在Photoshop中,我们 ...

  8. JSP之连接SQL Server

    1.在SQL Server中启用sa(请参考本人博客:http://www.cnblogs.com/zhouhb/archive/2011/02/15/1955324.html)2.在SQL Serv ...

  9. 设计模式——proxy代理模式

    目录 概述 定义 角色 为什么会有代理模式? 应用场景 示例 静态代理 例子 动态代理 JDK中生成代理对象的API 代码示例: 代码示例2 Cglib代理 代码示例 AOP(AspectOrient ...

  10. 启动matlab时总是直接跳转到安装界面的解决方案

    [关于2017双11过后MATLAB许可过期问题的解决方案] 在距离双11还有2个月之前,matlab会提示:Your MATLAB license will expire in 50 days -- ...