export default class BindEvent extends React.Component{
constructor(){
super()
//私有数据
this.state = {
msg:'嘿嘿',
name : 'zs',
age : 22,
gender : '男'
}
}
render(){
return<div>
BindEvent 组件
<hr/>
<button onClick = {()=>this.show('Hello,', 'World!')}
>按钮啊</button>
<h3>{this.state.msg}</h3>
</div>
}
show = (item1, item2) => {
this.setState({
msg: 'haha ' + item1 + item2,
name : '李四'
}, function(){
console.log(this.state.msg);
})
//console.log(this.state.msg);
//异步执行,更新未完毕,便执行了输出
//需要使用this.setState({}, callback)回调函数
}
}
需要注意的有两点:
- 使用setState只会把对应的state状态更新,而不会覆盖其他的state状态。
- 修改完毕后,不能够直接输出修改的值,因为serState是异步操作,很有可能修改未完成,就进行了输出,导致输出结果为初值,可以使用自带的回调函数来解决异步问题