無法以簡化形式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設置默認值。反應

回答

相關問題