zoukankan      html  css  js  c++  java
  • React中redux表单编辑

    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对应的属性值进行填充

  • 相关阅读:
    java 中的锁 -- 偏向锁、轻量级锁、自旋锁、重量级锁(转)
    MySQL存储引擎--MyISAM与InnoDB区别
    Socket详解
    Java线程池参数
    Java反射机制(转)
    java注解
    docker入门实例
    docker常用命令总结
    showdoc 自动脚本安装
    [mysql]You must reset your password using ALTER USER statement before executing this statement.
  • 原文地址:https://www.cnblogs.com/ChineseLiao/p/10153066.html
Copyright © 2011-2022 走看看