夺命雷公狗-----React---24--小案例之react经典案例todos(单条任务的删除)

我们的组建分析图

我们组建需要的是删除,数据流方式如下所示:

为了更方便下一步操作,先写个函数他

然后在Ul组建里面对她进行处理

然后在Zong组建里对数据进行处理,如下所示:

但是悲剧的一幕出现了,删除不准确,估计是传递的数据在哪一步出现了错误,检查了以下,问题出来了,数据在这一步的时候发生了丢失

其实不用那么复杂的,可以更简单的处理好,直接用props给父级即可

效果成功。。。。

完整代码如下所示:

<!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);
            },
            render:function(){
                return(
                    <li>
                        <label>
                            <input type="checkbox" checked={this.props.todo.isDown} />
                            {this.props.todo.text}
                        </label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <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} />
                            })
                        }
                    </ul>
                );
            }
        });
        //状态组建
        var Status = React.createClass({
            render:function(){
                return(
                    <div>
                        <input type="checkbox" />
                        3 已完成  /  3 总数
                        &nbsp;&nbsp;&nbsp;
                        <button>清除已完成</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
                });
            },
            render:function(){
                return(
                    <div>
                        <Ck addCkcon={this.addCkcon} />
                        <Ul todos={this.state.todos} deleteCkcon={this.deleteCkcon} />
                        <Status />
                    </div>
                );
            }
        });
        ReactDOM.render(
            <Zong />,
            document.getElementById(‘dome‘)
        );
    </script>
</body>
</html>
时间: 2024-10-05 10:49:37

夺命雷公狗-----React---24--小案例之react经典案例todos(单条任务的删除)的相关文章

夺命雷公狗—angularjs—24—extend继承对象

我们的angularjs中也是给我们留下了方法来做继承的,那么他就是传授中的extend... 不过要如下所示,第二个参数是继承到第一个对象里面的... <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script sr

夺命雷公狗---微信开发47----获取用户地理位置接口(2)

我们现在要做的是查找距离最近的“肯德基”,我们需要通过百度提供的LBS云服务定位距离您最近的肯德基,该程序需要到LBS后台进行相关设置,然后在完成程序 用户在客户端输入“肯德基”公众号就会自动回复距离用户最近的”肯德基“ 废话不多说,我们先到http://developer.baidu.com/里面找到LBS云------再到服务接口--------再到LBS云,如下图所示: 点击进来后,我们首先要获取一个密钥, 然后出了红色框部分填下数据即可,别的地方都不用改,直接提交即可 上面的0.0.0.

夺命雷公狗---微信开发39----微信语言识别接口1

语音识别接口的基本介绍 注意: 由于客户端缓存,开发者开启或者关闭语音识别功能,对新关注者立即生效,对已关注用户需要24小时生效,开发者可以从新关注帐号进行测试. 我们可以在测试号下方的体验接口权限表里面找到“接收语音识别结果”,如下图所示 现在这里是显示的关闭,就是开启,如果想使用,那么就必“关闭”. 点击一下开启后,他就会问你是否关闭,所以这里的意思是相反的,如图所示: 然后再点击一下确定即可关闭. 不过我们现在要对他进行开发所以这里就要显示关闭这两个字,然后点击“接收语音识别结果”即可进入

夺命雷公狗-----React---9--map数据的遍历

比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react-with-addons.

夺命雷公狗-----React---9--组建嵌套进行数据遍历

先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react-with-addons.js"></script> <script src="

夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react-with-addons.js"></script> <script src="./js/react

夺命雷公狗---微信开发46----获取用户地理位置接口(1)

我们先来看下手册有啥要求的先 我们先来写一个小功能,客户端每隔5s(秒)钟自动向公众平台报告自己的地理位置,服务器返回该地理位置给客户端. 我们要先到公众号管理界面里打开他才可以,因为默认的情况下他是关闭的,打开方法如下图所示: 如果开启成功后,他将会显示修改陈功,如下图所示: 我们在从新写过一个index.php的文件,代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php&q

夺命雷公狗-----React---4--props变量的传递

提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react.js"></script> <script src="./js/react

夺命雷公狗-----React---3--标签的规则

<!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"><

夺命雷公狗-----React---5--props对象的传递

提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react.js"></script> <script src="./js/react