一、在JS里使用(非ES6)
实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量
const fruit = [\'apple\', \'banana\', \'orange\']
let fruitInfo = {}
fruitInfo = fruit.map(item => {
return {
[item]: Math.floor(Math.random() * 10)
}
})
console.log(fruitInfo)
输出:
[{apple: 2},
{banana: 1},
{orange: 9}]
这里的重点在于返回的时候 通过[]
可以成功调用变量的值.
二、React setState的应用
和上面例子同理.利用[]
调用变量
class Example extends PureComponent{
...
handleChange = (val, type) => {
this.setState({
[type]: val
},() => {
console.log(`当前${type}的数量: ${this.state[type]}`)
})
}
...
render(){
...
return (
<Fagement>
<span>Banana: </span>
<select onChange={(e) => this.handleChange(e.target.value, \'banana\')}>
<option value ="1">1</option>
<option value ="2">2</option>
</select><br />
<span>Orange: </span>
<select onChange={(e) => this.handleChange(e.target.value, \'orange\')}>
<option value ="1">1</option>
<option value ="2">2</option>
</select>
</Fagement>
)
}
}
我们分别选择第二项的时候看看输出的结果
输出: .
当前banana的数量: 2
当前orange的数量: 2