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

  • 相关阅读:
    关于代码手写UI,xib和StoryBoard
    封装自己的framework静态库
    AsyncDisplayKit
    RunLoop
    AFNetworking2.0源码解析<三>
    AFNetworking2.0源码解析<四>
    AFNetworking2.0源码解析<二>
    AFNetworking2.0源码解析<一>
    多线程
    Mac svn 命令
  • 原文地址:https://www.cnblogs.com/ChineseLiao/p/10153066.html
Copyright © 2020-2023  润新知