動態修改JS對象的值及React setState
阿新 • • 發佈:2018-11-29
sele 場景 let 使用 pan 生成 sets rec sta
可以成功調用變量的值.
一、在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
動態修改JS對象的值及React setState