以下舉個簡單的例子:點選修改state中的num
import React, { Component } from 'react';
class Pratice extends Component {
constructor(props) {
super(props)
this.state = {
num: 1
}
}
render() {
return (
<div>
<tag onClick={this.handleClick.bind(this)}></tag>
</div>
);
}
// 每個選項點選後執行的代碼
handleClick(title, index) {
this.setState({
num: 2
});
console.log(this.state.num); // 這裡列印出來是1
}
}
export default Pratice;
因為setState是異步的,以上代碼如果需要正常列印出2,需要把執行代碼寫入setState的回調函數内
handleClick(title, index) {
this.setState({
num: 2
}, ()=>{
console.log(this.state.num); // 這裡列印出來是2
});
}