如何在JSX的setState中使用變量

Question

我想在React的JSX文件的setState函數中使用一個變量。

我將如何重組這些代碼：

var name = e.target.name; 
if(name == "title"){ 
    this.setState({ title: e.target.value}); 
} 
else if(name == "date"){ 
    this.setState({ date: e.target.value}); 
} 
else if(name == "amount"){ 
    this.setState({ amount: e.target.value}); 
} 

弄成這個樣子（所以我不重複自己）？

var name = e.target.name; 
this.setState({ name: e.target.value}); 

上述語法只是設置「name」的狀態而不是「name」變量的值。

Answer 1

簡單：

var newState = {}; 
newState[e.target.name] = e.target.value; 
this.setState(newState); 

Answer 2

var update = {}; 
update[e.target.name] = e.target.value; 
this.setState(update); 

如果你使用的是支持計算屬性名稱的ES6 transpliler（如Babel），你可以這樣做：

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