码迷,mamicode.com
首页 > 其他好文 > 详细

React中reduxForm表单编辑

时间:2018-12-20 23:58:17      阅读:378      评论:0      收藏:0      [点我收藏+]

标签:load   name   class   data   xtend   res   example   initial   port   

reduxForm中反写数据在输入框中,数据是从别的模块拉取
.关键代码如下
// 编辑应用表单 
class EditCode extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() { 

  }

  // 取消编辑
  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/

React中reduxForm表单编辑

标签:load   name   class   data   xtend   res   example   initial   port   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!