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 ...
随机推荐
- jQuery登录倒计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- css display:table圣杯布局
圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...
- 转:ArcGIS提取面状道路中心线(转载)
1.首先把所有的面要素merge成一个要素 2.把merge后的数据转成线数据 3.此时转换后的线数据一定是闭合的,为了防止提取中心线失败(只提取出外围轮廓)我们在随意一个道路末端使用打断工具打一个开 ...
- spring boot 项目在启动时执行指定sql文件
参考博客: https://www.jianshu.com/p/88125f1cf91c 1. 启动时执行 当有在项目启动时先执行指定的sql语句的需求时,可以在resources文件夹下添加需要执行 ...
- 用AutoHotkey调整Windows音量
我用了[右Alt]+方向键来调整音量:Alt+上下键,音量调整幅度为5,如果再增加个右Ctrl,音量调整幅度为1. Alt+左键为静音,Alt+右键为最大音量. >!Up:: ;音量+ < ...
- WIN10安装VS2013出现兼容性问题解决
在WIN10安装VS2013时,会提示“windows程序兼容模式已打开”,通过搜索引擎搜索的常见方案为: 1.使用命令行安装,进入vs_ultimate文件所在目录,输入:vs_ultimate / ...
- Opportunity的chance of success的赋值逻辑
该字段的值和另外两个字段Sales Stage和Status都相关. 从下列function module CRM_OPPORT_H_PROB_SET_EC可看出,当status不为代码中的这些硬编码 ...
- python接口测试-项目实践(三)数据的处理示例
三 数据处理 枚举值的转换.如接口返回1-5,需转成对应的中文. typecap = findinfo_from_api(result, 'TypeCap') dictcap = {': '微盘'} ...
- Android(java)学习笔记12:线程的状态转换图以及常见执行情况
1. 线程的状态转换图以及常见执行情况: 2. 线程状态类型: (1)新建状态(New):新创建了一个线程对象.(2)就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start() ...
- 多层感知机训练minist数据集
MLP .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1p ...