<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
<div id="my"></div>
<script type="text/babel">
class FormSelectT extends React.Component{
constructor(){
super()
this.state={
checkAll: false,
checkArr: [{name:'看书',status:false},{name:'睡觉',status:false},{name:'喝水',status:true}]
}
}
changeAll(e){
let {checkAll,checkArr} = this.state;
let check = e.target.checked;
checkAll = check;
checkArr.map((val)=>{
return val.status = check
})
this.setState({
checkAll: checkAll,
checkArr: checkArr
})
}
listControllAll(e){
let {checkArr,checkAll} = this.state;
checkArr.map((val)=>{
if(val.name == e.name){
return val.status = e.status
}
})
this.setState({
checkArr:checkArr
});
let changecheckAll=checkArr.every((val)=>{
return val.status
});
 
this.setState({
checkAll:changecheckAll
})
}
render(){
let {checkAll,checkArr} = this.state;
let self = this;
let arrHobby = checkArr.map((val,index)=>{
return <FormSelectB key={index} {...val} listControllAll={self.listControllAll.bind(self)}/>
})
return (
<div>
<input type="checkbox" checked={checkAll} onChange={(e)=>this.changeAll(e)}/><label>全选</label>
<ul>
{arrHobby}
</ul>
</div>
)
}
}
class FormSelectB extends React.Component{
constructor(props){
super(props)
this.state={
name:props.name,
status:props.status
}
}
changeList(e){
let check = e.target.checked;
let {name,status} = this.state;
this.setState({
status:check
},function(){
this.props.listControllAll({name:this.state.name,status:this.state.status})
})
}
componentWillReceiveProps(nextProps,prevProps){
let {status} = this.state
if(nextProps.status!=prevProps.status){
this.setState({
status:nextProps.status
})
}
}
render(){
let {name,status} = this.state;
return(
<li><input type="checkbox" checked={status} onChange={(e)=>{this.changeList(e)}}/><label>{name}</label></li>
)
}
}
ReactDOM.render(
<div>
<FormSelectT/>
</div>,
document.getElementById('my')
)
</script>
</body>
</html>

react纯手写全选与取消全选的更多相关文章

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

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  2. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  3. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  5. springmvc 动态代理 JDK实现与模拟JDK纯手写实现。

    首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用  ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...

  6. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  7. 简易-五星评分-jQuery纯手写

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  8. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  9. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

随机推荐

  1. 转: linux centos7 下安装maven

    转: https://www.tecmint.com/install-apache-maven-on-centos-7/

  2. SpringBoot 定时任务不能同时运行的问题

    使用Spring Task可以非常方便的进行定时任务,但是默认只能有一个定时任务在执行.如何改变这种状况呢? 在定时任务方法上添加@Async注解即可. @Scheduled(cron = " ...

  3. EAS开发报错 ：数据库表 或 视图 不存在

      一:原因分析     建模之后,发布数据时未能及时在数据库创建相应的表格或视图.   二:解决办法     建模视图下——右键模型——更新数据库.   三:名称字段.描述字段在数据库里的存储格式 ...

  4. 关于Django Ajax CSRF 认证

    CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...

  5. systemctl -- 系统服务管理器 【转】

    systemctl  -- 系统服务管理器 systemctl 是系统服务管理器命令,它实际上将 service 和 chkconfig 这两个命令组合到一起. 直接运行命令可以列出所有正在运行的服务 ...

  6. Mac 解压zip文件错误：无法将"*.zip"解压缩到"" （错误 1-操作不被允许）

    错误提示: 无法将"*.zip"解压缩到"" (错误 1-操作不被允许)或者 解压缩失败 英文提示: "Unable to unarchive int ...

  7. Docker使用exec进入正在运行中的容器

    docker在1.3.X版本之后提供了一个新的命令exec用于进入容器,这种方式相对简单一些,下面我们来看一下该命令的使用: docker exec --help 接下来我们使用该命令进入一个已经在运 ...

  8. ELK & ElasticSearch 5.1 基础概念及配置文件详解【转】

    转自:https://blog.csdn.net/zxf_668899/article/details/54582849 配置文件 基本概念 接近实时NRT 集群cluster 索引index 文档d ...

  9. Android Studio报错Error:Failed to open zip file. Gradle's dependency cache may be corrupt

    Android Studio导入项目后,Gradle编译失败,报错如下. Error:Failed to open zip file. Gradle's dependency cache may be ...

  10. 【python】——python3 与 python2 的那些不兼容

    python2 python3 string.uppercase string.ascii_uppercase string.lowercase string.ascii_lowercase xran ...