reduxForm 中反写数据在输入框中, 数据是从别的模块拉取
. 关键代码如下
- // 编辑应用表单
- class EditCode extends React.Component {
- constructor(props) {
- super(props)
- }
- componentDidMount() {
- }
- // 取消编辑
- handleBack=()=>{
- Windows.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
官网链接
来源: http://www.bubuko.com/infodetail-2891750.html