Aktualisierungsstatus über Funktion, die über Requisiten übergeben wurde

Question

Ich möchte den Status über eine Funktion aktualisieren, die ich über das onChange-Attribut über props an die untergeordnete Komponente übergebe. Dies ist in der Kind-Komponente:

<input className="minutes" type="number" defaultValue={ this.props.minutes } onChange={ this.props.updatePreferences("minutes", this.value) }/> minutes. 

Während dies ist die Funktion in der übergeordneten Komponente:

updatePreferences = (preferenceName, enteredValue) => { 
    switch (preferenceName) { 
     case preferenceName === "minutes": 
     this.setState({minutes: enteredValue}) 
     console.log(this.state) 
     return 
     case preferenceName === "business": 
     this.setState({...this.state, interests: { 
      ...this.state.interests, business: !this.state.interests.business}}) 
     return 
     default: 
     return 
    } 
    } 

die dann über die Strecke, um das Kind weitergegeben wird:

<Route exact path="/" render={props => <Welcome minutes = {this.state.minutes} 
                  interests = {this.state.interests} 
                  sayHello = {this.sayHello} 
                  updatePreferences = {this.updatePreferences} />} /> 

Answer 1

defaultValue wird nur während des Mounts gesetzt und kann daher nicht geändert werden, wenn ein Rendervorgang ausgeführt wird. (Es sei denn, Sie aktualisieren mit einem ref).

Auch möchten Sie nicht die updatePreferences Methode beim Rendern aufrufen, so müssen Sie bind oder verwenden Sie eine Pfeilfunktion.

Verwenden value statt prop eine gesteuerte Komponente zu erstellen:

<input className="minutes" 
     type="number" 
     value={ this.props.minutes } onChange={() => this.props.updatePreferences("minutes", this.value) }/> minutes. 

Answer 2

Zwei Dinge, damit es funktioniert:

(e) => this.props.updatePreferences("minutes", e.target.value) 

und die Syntax der switch-Anweisung war falsch:

switch (preferenceName) { 
    case "minutes": 
    this.setState({minutes: enteredValue}) 
    return 
    case "business": 
    this.setState({...this.state, interests: { 
     ...this.state.interests, business: !this.state.interests.business}}) 
    return 
    default: 
    return 
}