react解决checkbox全选checked的问题

今天在做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 (
      <div>
          全选 <input type="checkbox" onClick={this.allchecked.bind(this)} />
          <ul>
              {this.state.list.map((item,index)=>{
                    return(
                        <li key={index}><label><input type="checkbox"  checked={item.checked}  />{item.title}</label></li>
                    )
              })}
          </ul>
      </div>
    );
  }

获取到state里面的数据后渲染到页面，点击全选后下面的复选框有了checked=true，但是再次点击下面的复选框checked不能变为false。

原因是因为state里面的checked永远都是true，点击时不能自动改变checked的值，那么如何解决呢？

render() {
      return (
      <div>
          全选 <input type="checkbox" onClick={this.allchecked.bind(this)} />
          <ul>
              {this.state.list.map((item,index)=>{
                    return(
                        <li key={index}><label><input type="checkbox"  checked={item.checked}  onChange={(e)=>this.handleInputChange(e,index)} />{item.title}</label></li>
                    )
              })}
          </ul>
      </div>
    );
  }

只需要在下面的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.length;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.length;i++){
                this.state.list[i].checked=false;
            }
            this.setState({list:this.state.list},()=>{
                //console.log(this.state.list)
            })
        }
    }

好了这样就完美的解决了全选的问题，希望对大家有所帮助。