我无法设置w / redux-form的默认值。我正在寻找的结果是一个可编辑的文本字段,以后再提交给数据库。即更新电子邮件地址。
我尝试将表单中的属性设置为 value 或 defaultValue 。注意:我已经删除了重复的代码,以使仅使用“名称”字段即可轻松阅读。
任何见识表示赞赏!
import React, { Component, PropTypes } from 'react'; import { reduxForm } from 'redux-form'; export const fields = [ 'name'] //(container) page-profile.js import React, { Component } from 'react'; import { connect } from 'react-redux'; import Profile from '../components/Profile'; class PageProfile extends Component { render() { return ( <Profile userInfo = {this.props.userInfo} /> ) } } // requiring this page before rendering -- breaks page PageProfile.propTypes = { //userInfo: PropTypes.object.isRequired } function mapStateToProps(state) { return { userInfo : state.auth.userInfo } } // injection to child export default connect(mapStateToProps, { })(PageProfile); // profile.js export default class Profile extends Component { render() { const { fields: {name }, resetForm, handleSubmit, submitting } = this.props return ( <div> <img className="image" src={this.props.userInfo.img_url}/> <form onSubmit={handleSubmit}> <div> <div> <label>name</label> <div> <input type="text" defaultValue={this.props.userInfo.name} placeholder="name" {...name}/> </div> {name.touched && name.error && <div>{name.error}</div>} </div> <button type="submit" disabled={submitting}> {submitting ? <i/> : <i/>} Submit </button> </form> </div> ) } } Profile.propTypes = { fields: PropTypes.object.isRequired, handleSubmit: PropTypes.func.isRequired, resetForm: PropTypes.func.isRequired, submitting: PropTypes.bool.isRequired } export default reduxForm({ form: 'Profile', fields, validate })(Profile)
您可以initialValues在reduxForm的mapStateToProps中提供:
initialValues
reduxForm
const mapFormToProps = { form: 'Profile', fields, validate }; const mapStateToProps = (state, ownProps) => ({ initialValues: { name: ownProps.userInfo.name } }); reduxForm( mapFormToProps, mapStateToProps )(Profile)
然后像这样绑定:<input type="text" placeholder="name" {...name} />。
<input type="text" placeholder="name" {...name} />