加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react实现全选、取消全选和个别选择

发布时间:2020-12-15 20:33:37 所属栏目:百科 来源:网络整理
导读:react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React,{Component} from ‘react‘ export default class Demo extends React.Component{ constructor(props,context){ super(props,context); this .state = { checklist:[ {name: ‘

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:‘张三‘,{name:‘李四‘,{name:‘王五‘,] } } 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 })
}  } 

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读