无法以简化形式w设置默认值。反应

我无法设置窗体的默认值w/redux-form。我正在寻找的结果是稍后提交到数据库的可编辑文本字段。即更新电子邮件地址。无法以简化形式w设置默认值。反应

我已经尝试在窗体中设置属性值为值或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)

来源

2016-04-30 Christina Mitchell

为什么不只是使用价值？如果他们想改变它，那么他们可以改变它。你也没有在输入上设置任何值，所以尝试将'defaultValue'改为'value' –

我也尝试过使用值，它也不起作用。这是最奇怪的事情。 –

可以在reduxForm的mapStateToProps提供initialValues：

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} />。

来源

2016-04-30 19:25:13 Steven

无法以简化形式w设置默认值。反应

回答

相关问题