爲什麼數組類似的語法時動態地設置反應狀態

Question

下面是使用在react

功能對於設置state動態，我們通常做的

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

但是，如果我們把這個名字手動然後數組不需要。

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

有人能告訴我們爲什麼在array like syntax把e.target.name時dynamically獲取的name？

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'的鍵。