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

原文地址:https://www.cnblogs.com/ChineseLiao/p/10153066.html