关键词：
这个功能其实也是很简单的，就只是让todos里面的内isDown进行取反即可
然后在Zong里面进行下修改即可
效果如下所示：
代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/browser.min.js"></script> </head> <body> <div id="dome"></div> <script type="text/babel"> //搜索区域 var Ck = React.createClass({ //处理搜索事件的函数 handleKey:function(e){ //alert('test'); //判断回车enter键才处理,keyCode13==回车键 if(e.keyCode == 13){ //alert('test'); //如果搜索内容是空的让他不走了 if(!e.target.value) return; //否则添加任务了 var ckcon = { text : e.target.value, isDown: false } //利用属性完成 this.props.addCkcon(ckcon); //清空搜索框的内容 e.target.value = ''; } }, render:function(){ return( <div> <input type="text" placeholder="你要干嘛？" onKeyUp={this.handleKey} /> </div> ); } }); //列表项区域 var Lists = React.createClass({ handleClick:function(){ //alert('test'); this.props.deleteCkcon(this.props.index); }, //处理单选框的变化事件 handleChange:function(e){ //修改那个任务，修改的值是什么 this.props.changeStatus(this.props.index,e.target.checked); }, render:function(){ return( <li> <label> <input type="checkbox" checked={this.props.todo.isDown} onChange={this.handleChange} /> {this.props.todo.text} </label> <button onClick={this.handleClick}>删除</button> </li> ); } }); //列表框区域 var Ul = React.createClass({ render:function(){ //保存this指针 var _this = this; return( <ul> { this.props.todos.map(function(item,index){ return <Lists todo={item} key={index} index={index} deleteCkcon={_this.props.deleteCkcon} changeStatus={_this.props.changeStatus} /> }) } </ul> ); } }); //状态组建 var Status = React.createClass({ handleClick:function(){ //alert('test'); //删除已完成的 this.props.deleteDown(); }, render:function(){ return( <div> <input type="checkbox" /> {this.props.countDown} 已完成 / {this.props.total} 总数 <button onClick={this.handleClick}>清除已完成</button> </div> ); } }); //总组建 var Zong = React.createClass({ getInitialState:function(){ return { todos :[ {text:'6点起床',isDown:true}, {text:'7点出门',isDown:true}, {text:'8点吃早饭',isDown:false}, {text:'9点上班',isDown:true}, {text:'12点下班',isDown:false} ], isAllChecked: false } }, addCkcon:function(todo){ //接收到用户的添加的内容然后铺push过去即可 this.state.todos.push(todo); //然后更新state this.setState({ todos : this.state.todos }); }, //处理删除任务 deleteCkcon:function(index){ //用函数splice来删除掉指定的数组元素 this.state.todos.splice(index,1); //删除完成后来更新下页面的内容 this.setState({ todos : this.state.todos }); }, //任务单选框的属性 changeStatus:function(index,isDown){ this.state.todos[index].isDown = isDown this.setState({ todos : this.state.todos }) }, //统计总的任务个数 total:function(){ return this.state.todos.length || 0 }, //统计已完成的 countDown:function(){ var arr = this.state.todos.filter(function(todo){ return todo.isDown }); return arr.length || 0; }, deleteDown:function(){ var arr = this.state.todos.filter(function(todo){ return !todo.isDown }); this.setState({ todos:arr }); }, render:function(){ return( <div> <Ck addCkcon={this.addCkcon} /> <Ul todos={this.state.todos} deleteCkcon={this.deleteCkcon} changeStatus={this.changeStatus} /> <Status total={this.total()} countDown={this.countDown()} deleteDown={this.deleteDown} /> </div> ); } }); ReactDOM.render( <Zong />, document.getElementById('dome') ); </script> </body> </html>
夺命雷公狗-----react---22--小案例之react经典案例todos（上）
在很多前端框架中todos都是一个小的参考例子，在react中当然也是不例外的，先来看看最终的效果先。。。 这个就是官方的例子，我们先来分析下他是由那及格组建组合成的。。。再来分析下他是的数据最终是由那些地方过... 查看详情
夺命雷公狗-----react---26--小案例之react经典案例todos（统计部分的完成）
这一个其实是比较容易的，只需要统计他的总数和已完成的即可， 效果如下所示： 代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./j 查看详情
夺命雷公狗-----react---25--小案例之react经典案例todos（单选框的修改）
还是老样子，首先给li里面的单选框一个函数，然后通过props来对她进行处理 然后在ul里面对父组建进行传送 补充一下啊第一步，因为到时候要用到index属性，所以我们需要发送多一个index过来 然后在Zong里面然状... 查看详情
夺命雷公狗-----react---24--小案例之react经典案例todos（单条任务的删除）
我们的组建分析图 我们组建需要的是删除，数据流方式如下所示： 为了更方便下一步操作，先写个函数他 然后在Ul组建里面对她进行处理 然后在Zong组建里对数据进行处理，如下所示： 但是悲剧的一... 查看详情
夺命雷公狗---微信开发57----微网站之jquery_mobile之入门案例
这节课我们主要用到到jquery_mobile来实现一个点电影播放网站jquery_mobile（简称JQM）其实就是基于jquery开发出来的一套移动端框架，适应移动用户端市场对浏览与体验从而进一步的提升jquery_mobile控件介绍jquery_mobile的语法将各个控... 查看详情
夺命雷公狗—java---003---java注释
夺命雷公狗—JAVA---003---java注释JAVA注释//我是单行注释/*我是多行注释~~！*//***这个类绘制一个条形图*我是文档注释*@authorrunoob*@version1.2*/ 查看详情
夺命雷公狗—java---008---println和print的区别
夺命雷公狗—JAVA---008---println和print的区别代码如下所示：classTest{publicstaticvoidmain(String[]args){System.out.println("夺命雷公狗");System.out.println(18);System.out.println('男');System.out.println("-------------"); 查看详情
夺命雷公狗—java---005---编码问题
夺命雷公狗—JAVA---005---编码问题在编写程序的时候我们是需要注意一下编码问题的，比如我们创建一个Hello.java 的文件，代码如下所示：classHello{publicstaticvoidmain(String[]args){System.out.println("你好");}} 然后我们来到文件... 查看详情
夺命雷公狗---dedecms----26dedecms面包屑导航的实现
我们在很多项目里面都会用到面包屑导航，而dedecms里面也是给我们封装好面包屑导航的了,如下图所示： 在dede里面实现面包屑导航主要用到{dede:field.position/}标签，我们首先来修改下article_movie.htm内容页的模版文件： 我们... 查看详情
夺命雷公狗—java---010---变量
夺命雷公狗—JAVA---010---变量变量是用来存储数值（数据）在java中，变量其实就是一块存储区域，变量中存储的数据时存储在JVM内存中的。 变量三要素1，数据类型是用来存储：字符串，小数，整数，单个字符，布尔值，... 查看详情
夺命雷公狗-----react---2--组建
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react 查看详情
夺命雷公狗—java---006---大小写问题
夺命雷公狗—JAVA---006---大小写问题1，源码文件名.java大小写的问题源码文件名不区分大小写，但是极力推荐区分大小写 2，字节码文件名（类名）严格区分大小写 3，代码中大小写严格区分大小写 温馨提示，玩JAVA基... 查看详情
夺命雷公狗—java---002---java开发环境搭建
夺命雷公狗—JAVA---002---java开发环境搭建JDK：JavaDeveloper'sKit，java开发工具包JDK是提供给Java开发人员使用的，其中包含了java的开发工具，也包括了JRE。所以安装了JDK，就不用在单独安装JRE了。其中的开发工具：编译工具(javac.exe)... 查看详情
夺命雷公狗---微信开发54----微信js-sdk接口开发之快速入门
js-sdk基本介绍除去服务号的九大接口外，微信提供了JS-SDK接口，所谓JS-SDK接口也就是在网页中使用javascript来更改网页设置，（比如隐藏右上角的菜单）获取用户状态（比如地理位置）甚至调用微信的录音功能上传下载和扫描等... 查看详情
夺命雷公狗-----react---10--添加css样式的方法
<!DOCTYPE><html><head><metacharset="utf-8"><title></title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react-dom.js"></scri 查看详情
夺命雷公狗-----react---1--页面的渲染
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react 查看详情
夺命雷公狗----git---5---分支
git分支的概念相当于是添加一个属于自己的分支，别人是看不到的，等你写完自己的程序到时候在合并到团队的分支上即可。。。。我们可以查看自己git里面有什么分支，如下所示：gitbranch 在这里我们可以很明显的看到... 查看详情
夺命雷公狗-----react---3--标签的规则
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react-dom.j 查看详情