関数を経由して関数を渡して更新する

Question

onChange属性を使用してprops経由で子コンポーネントに渡す関数を介して状態を更新したいとします。この一方で

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

は、親コンポーネント内の関数である：これは、子コンポーネントである

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

Answer 1

defaultValue：その後、子へのルートを経由して渡され

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 
    } 
    } 

マウント中にのみ設定されるため、再レンダリングが発生したときは変更できません。 （refを使用して更新しない限り）。

また、レンダリング時にupdatePreferencesメソッドを呼び出したくないので、bindにするか、矢印機能を使用する必要があります。それを動作させるために

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

Answer 2

2つのこと：

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

とswitch文が間違っていたの構文：

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 
} 

制御コンポーネントを作成する代わりに

使用value小道具