2016-04-30 14 views
5

Non riesco a impostare un valore predefinito di un modulo w/redux-form. Il risultato che sto cercando è un campo di testo modificabile per poi inviarlo al database. Ad esempio, aggiornando un indirizzo email.impossibile impostare un valore predefinito in redux-form w. reagire

Ho provato a installare una struttura a forma di valore o defaultValue. Nota: ho rimosso il codice ripetitivo per semplificare la lettura con un campo "nome".

qualsiasi intuizione è apprezzata!

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

perché non usare solo il valore? se vogliono cambiarlo, possono cambiarlo. anche tu non stai impostando un valore sull'input, quindi prova a cambiare 'defaultValue' a' value' –

+0

Ho provato anche con valore, non ha funzionato neanche. è la cosa più strana –

risposta

8

È possibile fornire initialValues in mapStateToProps reduxForm s':

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

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

reduxForm(
    mapFormToProps, 
    mapStateToProps 
)(Profile) 

Poi basta legare in questo modo: <input type="text" placeholder="name" {...name} />.

Problemi correlati