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 ...
随机推荐
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- Ubuntu真机安装
Ubuntu真机安装 1.Ubuntu安装: (1)启动盘制作: a.下载启动盘制作工具Universal USB Installe,下载地址: b.下载Ubuntu系统镜像,到本地磁盘,官方下载地址 ...
- JS构造函数(便于理解,简易)
* 构造函数: * 1.构造函数的函数名最好首字母大写(否则 WebStorm 编辑器会提示报错) * 2.自己的对象多次被复制 * 3.构造函数里可以创建公有属性.公有方法.私有属性和私有方法 * ...
- Struts2项目问题及解决方式
1. 问题描述如图: 问题解释:意思就是execute()方法写错了. 问题解决: 改正:
- 模拟ArrayList
package com.helloidea; import java.util.ArrayList; import java.util.Collection; import java.util.Lis ...
- 【Spring实战】—— 15 Spring JDBC模板使用
前一篇通过对传统的JDBC的使用操作,可以体会到使用的繁琐与复杂,套句话说,是用了20%作了真正的工作,80%作了重复的工作. 那么通过本篇,可以了解如下的内容: 1 如何配置数据源 2 如何在spr ...
- x86 分页机制——虚拟地址到物理地址寻址
x86下的分页机制有一个特点:PAE模式 PAE模式 物理地址扩展,是基于x86 的服务器的一种功能,它使运行 Windows Server 2003, Enterprise Edition 和 Wi ...
- June 05th 2017 Week 23rd Monday
No great discovery was ever made without a bold guess. 没有大胆的猜测就没有伟大的发现. I've read this sentence just ...
- 牛客网数据库SQL实战1-查找最晚入职员工的所有信息
题目描述 查找最晚入职员工的所有信息CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` date NOT NULL,`fi ...
- python入门12 列表list
列表使用率较高,方法也多. 列表的定义 #coding:utf-8 #/usr/bin/python """ 2018-11-10 dinghanhua 列表 " ...