react解决checkbox全选checked的问题
日期：-08-23
来源：程序思维浏览：2117次
今天在做react后台管理系统需要批量删除功能，没想到checkbox在react里面使用还存在不少坑，接下来看看我的填坑教程吧。
问题描述，先看一下代码：
constructor() {
super()
this.state = {
list: [
{id: "1", title: "新闻新闻新闻新闻新闻1", checked: false},
{id: "2", title: "新闻新闻新闻新闻新闻2", checked: false},
{id: "3", title: "新闻新闻新闻新闻新闻3", checked: false},
{id: "4", title: "新闻新闻新闻新闻新闻4", checked: false}
]
}
}
render() {
return (
全选
{this.state.list.map((item,index)=>{
return(
{item.title}
)
})}
);
}
获取到state里面的数据后渲染到页面，点击全选后下面的复选框有了checked=true，但是再次点击下面的复选框checked不能变为false。
原因是因为state里面的checked永远都是true，点击时不能自动改变checked的值，那么如何解决呢？
render() {
return (
全选
{this.state.list.map((item,index)=>{
return(
this.handleInputChange(e,index)}/>{item.title}
)
})}
);
}
只需要在下面的checkbox里面加一个onChange事件来改变state里面的checked的值就可以了handleInputChange方法里面的代码如下：
handleInputChange(event,index) {
this.state.list[index].checked=event.target.checked;
this.setState({list:this.state.list},()=>{
console.log(this.state.list);
})
}
全选方法allchecked里面的代码：
allchecked(e){
if(e.target.checked){
for(let i=0;i
this.state.list[i].checked=true;
}
this.setState({list:this.state.list},()=>{
//console.log(this.state.list)
})
}else{
for(let i=0;i
this.state.list[i].checked=false;
}
this.setState({list:this.state.list},()=>{
//console.log(this.state.list)
})
}
}
好了这样就完美的解决了全选的问题，希望对大家有所帮助。
