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 (
这是全选取消全选的demo
{this.state.checklist.length?this.state.checklist.map(function(item,index){return 
{item.name}
                    }):''}
        )}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.lengthlet ev = true;for(let a=1;a){ // 遍历，如果列表里除了第一个之外，其他的都勾选的话，就把全选按钮也勾选掉if(!this.state.checklist[a].checked){ev = false;}}if(ev){this.state.checklist[0].checked = true;}

　　　　　　

　　　　this.setState({ // 每点击一次更新状态checklist:this.state.checklist})

}  } 

 若有更优化的方案，欢迎提出~