<!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. 微信小程序+微信管理后台+微信用户前台

    代码地址如下:http://www.demodashi.com/demo/15043.html #### 微信小程序+微信管理后台+微信用户前台 #### 产品介绍 基础功能开发:景区微信地图导游.天 ...

  2. 一行代码搞定 R 语言模型输出！（使用 stargazer 包）

    引言 使用stargazer包可以将 R 构建的模型结果以LATEX.HTML和ASCII格式输出,方便我们生成标准格式的表格.再结合rmarkdown,你就可以轻轻松松输出一篇优雅的文章啦~本文“使 ...

  3. Nload(CentOS网速的实时监控)

    Nload(CentOS网速的实时监控)的安装和安装过程中的问题 I. 安装 Download the latest rpmforge-release rpm from wget ftp://ftp. ...

  4. 【原创 Hadoop&Spark 动手实践 1】Hadoop2.7.3 安装部署实践

    目录: 第一部分:操作系统准备工作: 1. 安装部署CentOS7.3 1611 2. CentOS7软件安装(net-tools, wget, vim等) 3. 更新CentOS7的Yum源,更新软 ...

  5. 解决通过Nginx转发的服务请求头header中含有下划线的key，其值取不到的问题

    1. 问题 由于在http请求头的头部中设置了一些自定义字段,刚好这些字段中含有下划线,比如bundle_name这种,后端在进去获取头部信息时,发现取不到对应的值 2. 原因及解决办法 分析 首先看 ...

  6. netstat实现原理

    因为最近接手的项目是基于嵌入式Linux openwrt的,一开始以为会跟之前的服务器开发没什么大的区别,但是遇到问题去分析的时候才发现,工具链还是有些差别的,openwrt的netstat是属于一个 ...

  7. web多站点跨域访问

    有时项目app和m 需要公用一套接口 这个时候就要用到跨域:特别是app接口跨域访问站点时. 跨域配置: 1.iis服务器上需要安装URLwrite2.0 2.web.config 需要添加这个配置: ...

  8. 通过inotify实现反调试

    1.inotify linux下inotify可以实现监控文件系统事件(打开,读写删除等),inotify最常见的api有以下几个: inotify_init:用于创建一个 inotify 实例的系统 ...

  9. spring boot与kafka

    1.项目搭建 2.关键代码与配置 3.性能调优 注意,本项目基于spring boot 1,如果是spring boot 2有可能会报错.相应的包需要更新 1.项目搭建 kafka版本:kafka_2 ...

  10. c++ 异常 warning: 'MEMORY_UNIT_NAME' defined but not used

    是开关的问题  , 将 #-g -O2 -pipe -W -Wall -Werror -fPIC -Wno-deprecated    c++ 去掉.不检查.