React中reduxForm表单编辑

Posted 2021-01-28 chineseliao

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/