入力が更新されないのはなぜですか？ - 反応

Question

なぜ私はinputが更新されていないのか分かりません。私のコードは以下の通りです：

state = { 
    org: { 
     orgName: '' 
    } 
}; 

updateInput = field => event => { 
    this.setState({ 
     [field]: event.target.value 
    }) 
} 

render() { 
    let { org } = this.state 
    return (
     <input 
      value={org.orgName} 
      onChange={this.updateInput('orgName')} 
     /> 
    ) 
} 

inputにデータを入力します。 updateInputを呼び出し、stateを設定します。 renderが呼び出されると、org.orgNameは再び''になります。これはうまくいくはずです。私もsetStateコールバックでログを追加した

：

this.setState({ 
     [field]: event.target.value 
},() => console.log(this.state.org)) 

をし、それは私が何をしないのですinput

に入力されたorg情報をログアウトしますか？どのように私はこの作品を作るのですか？

Answer 1

あなたはあなたの状態では、ネストされたオブジェクトを持っている - あなたは

updateInput = field => event => { 
    this.setState({ 
     org: { 
      ...this.state.org, 
      [field]: event.target.value 
     } 
    }) 
} 

するthis.state.orgName代わりのthis.state.org.orgName

updateInput = field => event => { 
    this.setState({ 
     [field]: event.target.value 
    }) 
} 

ニーズを更新しているが、あなたが今後ものの状態で営巣オブジェクトを避ける勧め。後で最適化するのが難しいと証明されます。