奪命雷公狗-----React---24--小案例之react經典案例todos（單條任務的刪除）

weixin_30639719發表於2020-04-05
React

我們的組建分析圖

 

 

我們組建需要的是刪除，資料流方式如下所示：

 

為了更方便下一步操作，先寫個函式他

 

然後在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==Enter鍵
                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>

 

轉載於:https://www.cnblogs.com/leigood/p/6116149.html

相關文章