react實現全選、取消全選和個別選擇

react里面實現全選和取消全選，個別選擇等操作，效果如下

代碼：

import React, {Component} from 'react'

export default class Demo extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state = {
            checklist:[
                {name:'全選',checked:false},
                {name:'張三',checked:false},
                {name:'李四',checked:false},
                {name:'王五',checked:false},
            ]
        }
    }

    render(){
        let _self = this;
        return (
            <div className="ToDo">
                <div>這是全選取消全選的demo</div>

                {
                    this.state.checklist.length?
                    this.state.checklist.map(function(item,index){
                        return <div key={index}>
                        <label><input type="checkbox" onChange={_self.checkThis.bind(_self,item)} checked={item.checked}/>{item.name}</label>
                        </div>
                    })
                    :''
                }
                
            </div>
        )
    }
    checkThis(item){
        item.checked = !item.checked;
        if(item.name==='全選'){ // 如果點擊的是全選，就把所有的選中或全部取消勾選
            if(item.checked){
                this.state.checklist.forEach(i=>{
                    i.checked = true;
                })
            }else{
                this.state.checklist.forEach(i=>{
                    i.checked = false;
                })
            }
            
        }
　　　　　// 如果全選之后，取消勾選其中的一個或多個，則會把全選也取消勾選掉
        let result = this.state.checklist.some(j=>{
            if(!j.checked){
                return true;
            }
        })

        if(result){
            this.state.checklist[0].checked = false;
        }
        
        
        let len = this.state.checklist.length
        let ev = true;
        for(let a=1;a<len;a++){ // 遍歷，如果列表里除了第一個之外，其他的都勾選的話，就把全選按鈕也勾選掉
            if(!this.state.checklist[a].checked){
                ev = false;
            }
        }
        if(ev){
            this.state.checklist[0].checked = true;
        }
　　　　　　

　　　　this.setState({ // 每點擊一次更新狀態
            checklist:this.state.checklist })

}  } 

 若有更優化的方案，歡迎提出~