项目需求:
Checkbox Group中包含多个checkbox,当勾选的个数超过10个后,其他多选框禁选,不超过10个又可以勾选
问题描述
`在Checkbox Group上绑定onChanges事件,勾选后获取每个多选框绑定的value值,通过对value长度的判断,处理可选项数据,再重新setState来渲染。
问题:setState之后在render中打印可选项数据发现数据并没有set进去,导致无法实现禁选。
handleOnChange = (value) =>{
...
this.setState({list:[]})
}
render(){
const {list} =this.state;
console.log(list) //list还是onChange之前的值
return()
}
原因分析:
可能是由于setState的更新机制有关:
解决方案:
通过加一个定时器,实现setState同步更新
handleOnChange = ()=>{
setTimeout(( )=>{
this.setState({ list:[ ] })
})
}