構文のような配列を動的状態

Question

以下

を反応させる設定する際に使用stateを設定しreact

における関数であるなぜ我々は、手動でその名前を入れた場合でも、配列ではない動的に我々は通常

handleChange: function (e) { 
    this.setState({[e.target.name]: e.target.value}) 
} 

を行います必要です。 dynamicallyはnameを取得するときに我々はarray like syntaxでe.target.nameを置く理由

handleChange: function (e) { 
    this.setState({name: e.target.value}) 
} 

誰かが言うことができます？

Answer 1

これはES6の構文で、という計算キーと呼ばれています。もう少し詳しくはthis answerを参照してください。基本的にはe.target.nameであればオブジェクトキーとして設定されます。

handleChange: function (e) { 
    this.setState({[e.target.name]: e.target.value}) 
} 

それはES5（より詳細な）でこれを行うのと同じです：

handleChange: function (e) { 
    var state = {}; 

    state[e.target.name] = e.target.value; 

    this.setState(state); 
} 

Answer 2

Javascriptは、オブジェクトのキーを文字列として評価します。したがって、[e.target.name]は、名前がe.target.name（文字列にキャスト）の値であるキーにアクセスすることを意味し、name：は名前が 'name'であるキーとして解釈されます。