React中的全选反选问题
全选反选问题
1.在state里维护一个数组,例如showArr:[]
2.绑定点击事件的时候将当前这个当选按钮的index加进来
<span className='arrow' onClick={this.showInfo.bind(this,showID)}></span>
3.点击事件showInfo
showInfo(rowID){
let rowArr =this.state.rowArr
rowArr[rowID] =!rowArr[rowID]
this.setState({
rowArr
})
}
最后,就可以快乐的渲染了
<ShowIngo hei={this.state.rowArr[rowID]} />
//当前这个为true就显示,为false就不显示,丝毫不影响其他兄弟,是不是美滋滋
React中的全选反选问题的更多相关文章
- 在GridView中实现全选反选的例子
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridView控件.asp ...
- vue2.0实现在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...
- vue2.0在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- html中全选反选
<!--第一层--> <div class="first"> <div class="first_top"> <img ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
随机推荐
- Python进阶篇四:Python文件和流
摘要: Python对于文件和流的操作与其他编程语言基本差不多,甚至语句上比其他语言更为简洁.文件和流函数针对的对象除了这两者之外还有,类文件(file-like),即python中只支持读却不支持写 ...
- Linux CentOS如何汉化系统
su root切换为root用户 写入环境变量 echo "export LANG="zh_CN.UTF8"">>/etc/profile sour ...
- 【转】JavaScript 中值得注意的 for 循环
在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...
- 架构蓝图--软件架构 "4+1" 视图模型
引言 我们已经看到在许多文章和书籍中,作者欲使用单张视图来捕捉所有的系统架构要点.通过仔细地观察这 些图例中的方框和箭头,不难发现作者努力地在单一视图中表达超过其表达限度的蓝图.方框是代表运行的程序吗 ...
- 极点五笔词库DIY
2004年没啥好的拼音输入法,试了清华紫光输入法一段时间,也相当不满意, 于是在2005年开始学五笔,很快就选定极点五笔了, 使用过程中没啥不满意的,反而还有惊喜: 重装系统后,双击就安装好输入法了, ...
- python:序列与模块
一,序列化模块 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 比如,我们在python代码中计算的一个数据需要给另外一段程序使用,那我们怎么给? 现在我们能想到的方法就 ...
- POJ 1503 大整数
之前做的大整数,都是一位一位操作. 优化方案:压缩方案. 模板: + - * 操作符重载 #include<cstdio> #include<iostream> #inclu ...
- 贪心算法,今年暑假不AC
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2037 活动安排问题,可用贪心. 1.把活动按结束时间递增排序. 2.直观上,选择相对活动为未安排活动留 ...
- (第三场) H Diff-prime Pairs 【数论-素数线性筛法+YY】
题目链接 题目描述 Eddy has solved lots of problem involving calculating the number of coprime pairs within s ...
- Spring 声明式事务管理方式
声明式事务管理,基于AOP对目标代理,添加环绕通知,比编码方案优势,不具有侵入式,不需要修改原来的代码. 1.基于XML配置的声明式事务管理方案(案例) 接口Service public i ...