zoukankan      html  css  js  c++  java
  • 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
            })
    }  } 

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

  • 相关阅读:
    队列与堆栈
    Python中的内置函数
    Centos 7 最小化部署svn版本控制(svn协议)
    Android中的一些简单的adb命令
    liunx服务程序的安装及配置
    liunx中安装包及其应用
    liunx网络基本命令
    liunx系统和其它的基本命令
    liunx用户管理的基本命令
    liunx的磁盘管理的基本命令
  • 原文地址:https://www.cnblogs.com/leiting/p/10472327.html
Copyright © 2011-2022 走看看