2016-04-30 32 views
5

Bir form w/redux formunun varsayılan değerini ayarlayamıyorum. Aradığım sonuç, daha sonra veritabanına göndermek için düzenlenebilir bir metin alanıdır. bir e-posta adresini güncellemek.redux formunda bir varsayılan değer ayarlayamıyor w. tepki

Ben değeri veya defaultValue için formda bir özellik ayarı denedim. Not: Sadece bir "isim" alanı ile daha kolay okunabilmesi için tekrar eden kodlar attım.

herhangi bir içgörü takdir edilmektedir!

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) 
+0

neden sadece değer kullanmıyorsunuz? eğer değiştirmek istiyorlarsa değiştirebilirler. Ayrıca girişte bir değer ayarlamıyorsunuz, bu yüzden de 'defaultValue' değerini "value" olarak değiştirmeyi deneyin. –

+0

Değerle denedim, işe yaramadı. Bu en garip şey. –

cevap

8

Sen reduxForm 'ın mapStateToProps içinde initialValues sağlayabilmektedir:

const mapFormToProps = { 
    form: 'Profile', 
    fields, 
    validate 
}; 

const mapStateToProps = (state, ownProps) => ({ 
    initialValues: { 
    name: ownProps.userInfo.name 
    } 
}); 

reduxForm(
    mapFormToProps, 
    mapStateToProps 
)(Profile) 

Sonra sadece şöyle bağlamak: <input type="text" placeholder="name" {...name} />.

İlgili konular