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

  • 相关阅读:
    SpringBoot分布式篇Ⅷ --- 整合SpringCloud
    SpringBoot分布式篇Ⅶ --- 整合Dubbo
    java.lang.IllegalArgumentException: There is no PasswordEncoder mapped for the id "null"
    小学数学题
    GoLang GRPC使用
    GoLang Socket 聊天实例
    golang Redis运用
    go mod 运用
    Golang Socket编程小实例
    GoLang协程和管道
  • 原文地址:https://www.cnblogs.com/ChineseLiao/p/10153066.html
Copyright © 2011-2022 走看看