Régler l'état de réaction à partir des données Meteor

Question

développeurs! Quelqu'un peut-il m'aider s'il vous plaît? Je suis en train mis state dans React à partir des données Meteor et modifier cette state données d'entrée, il ressemble à

---

class Profile extends Component{ 
    constructor(props){ 
    super(props); 
    this.editProfileBind = this.editProfile.bind(this); 
    this.testEmailBind = this.testEmail.bind(this); } 

    testEmail(e){ 
    const input = e.target; 
    this.setState({ 
     email: input.value 
    }); 
    input.value = this.state.email; 
    } 

    editProfile(e){ 
     e.preventDefault(); 
    } 

    render(){ 
    return(
     <form className="col-md-4 col-xs-6" 
      onSubmit={this.editProfileBind}> 
      <input type="email" 
        onChange={this.testEmailBind} 
        value={this.props.email || ''} 
       /> 
      <button type="submit">Submit</button> 
     </form> 
    ) 
} 
} // end component 

export default createContainer(() => { 
    const user = Meteor.user(); 
    const email = user.emails && user.emails[0].address; 

    return { email }; 
}, Profile); 

Pouvez-vous me suggérer comment puis-je mettre this.state.email à l'entrée à la place this.props.email? Merci!

Answer 1

problèmes de couple avec le code:

1. état intialize avec des accessoires

Dans le constructeur, vous devez définir votre état initial à l'hélice email étant passé dans

. 2. L'entrée value doit être égale à this.state.email

La valeur isn Ne pas mettre à jour car vous définissez la valeur du prop transmis (qui ne change pas) au lieu de l'état email que votre fonction testEmail met à jour.

3. État mise à jour avec de nouveaux accessoires

Vous devez ajouter une fonction componentWillReceiveProps qui met à jour votre état email lorsque de nouvelles données sont transmises dans le composant Profile.

Le composant Profile devrait ressembler à ceci:

class Profile extends Component{ 
    constructor(props){ 
    super(props); 
    this.editProfileBind = this.editProfile.bind(this); 
    this.testEmailBind = this.testEmail.bind(this); 
    this.state = { 
     email: props.email 
    } 
    } 

    testEmail(e){ 
    const input = e.target; 
    this.setState({ 
     email: input.value 
    }); 
    } 

    editProfile(e){ 
     e.preventDefault(); 
    } 

    componentWillReceiveProps(nextProps){ 
    this.setState({ 
     email: nextProps.email 
    }); 
    } 

    render(){ 
    return(
     <form className="col-md-4 col-xs-6" 
      onSubmit={this.editProfileBind}> 
      <input type="email" 
        onChange={this.testEmailBind} 
        value={this.state.email} 
       /> 
      <button type="submit">Submit</button> 
     </form> 
    ) 
} 
} // end component 

export default createContainer(() => { 
    const user = Meteor.user(); 
    const email = user.emails && user.emails[0].address; 

    return { email }; 
}, Profile);