2017-06-28 6 views
0

Entwickler! Kann mir bitte jemand helfen? Ich state gesetzt versuchen, in von Meteor Daten reagieren und bearbeiten diese state Daten vom Eingang, es sieht aus wieSet React state von Meteor Daten


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); 

Können Sie mir vorschlagen, wie ich this.state.email zur Eingabe statt this.props.email einstellen kann? Vielen Dank!

Antwort

3

Paar Probleme mit dem Code:

1. intialize Zustand mit Requisiten

im Konstruktor, müssen Sie Ihren Ausgangszustand der email prop gesetzt in geben wird

. 2. Eingabe value sollte gleich sein this.state.email

Der Wert isn Es wird nicht aktualisiert, da Sie den Wert für die Prop-Datei, die übergeben wird (die sich nicht ändert), anstelle des email-Status festlegen, den Ihre testEmail-Funktion aktualisiert.

3. Aktualisieren Staat mit neuen Requisiten

Sie benötigen einen componentWillReceiveProps Funktion hinzuzufügen, die Ihre email Zustand aktualisiert, wenn neue Daten in die Profile Komponente übergeben wird.

Die Profile Komponente sollte wie folgt aussehen:

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

Dank @Chase, es funktioniert! Also Grund zur statischen E-Mail war, dass ich Requisiten benutzt habe ... Danke, kannst du auch etwas Material vorschlagen, um etwas über React zu erfahren? –

+0

wunderbar! Hey jage, gibt es ein Problem mit der Bedingung in componentWillReceiveProps Zustand setzen. I.e. Prüfen, ob das Laden abgeschlossen ist und erst dann einstellen. –

+0

@FabianBosler Das ist gut zu machen, aber es wäre besser, eine "Laden" -Kontrolle in den Elternkomponenten 'render' zu haben. –

Verwandte Themen