初學react---todolist實例

最近剛學習了阮一峰老師的react入門教學-----React 入門實例教程

然后大概理解了React的用法，然后比較迷茫不知道react可以干啥，看評論說先做個todolist,然后我就看着一些教程試着做了個。

 

todolist主要是實現一個增查改刪的功能，結構大概長這樣。

長得雖然很丑（還沒寫樣式）,但他的結構還是挺清晰的，由一個總的父組件和兩個子組件組成。然后我們就可以這樣寫:

//總組件
    var TodoList  = React.createClass({
        render:function(){
            return(
                //添加子組件
                <div>
                    <TypeNew />
                    <ListTodo  />
                </div>
            );
        }
    });

//輸入框組件用於新增數據
    var TypeNew = React.createClass({

        render:function(){
            return(
                <form>
                    <input type="text" ref="inputnew"     placeholder="typing a newthing todo" 
                    autoComplete="off" />
                    <input type="button" value="提交" />
                </form>
            );
        }
    });

//用於展示數據、刪除、修改數據
    var  ListTodo = React.createClass({
        
        render:function(){
            return(
                <ul id="todolist">
                {}
                </ul>
            );
        }
    });
　　React.render(<TodoList />，document.body）；

 

查看數據:

　　展示、查看數據主要是考慮一個將數據存在哪的，而react的思想是建議將數據存儲在父組件的state中，通過props傳給子組件。

//總組件
    var TodoList  = React.createClass({
        //父組件statec存儲數據
　　　　　getInitialState:function(){
                return{
                    todolist:[]
              };
        },

        render:function(){
            return(
                //添加子組件
                <div>
                    <TypeNew todo={this.state.todolist} />
                    <ListTodo todo={this.state.todolist} />
                </div>
            );
        }
    });

//輸入框組件用於新增數據
    var TypeNew = React.createClass({

        render:function(){
            return(
                <form>
                    <input type="text" ref="inputnew"     placeholder="typing a newthing todo" 
                    autoComplete="off" />
                    <input type="button" value="提交" />
                </form>
            );
        }
    });

//用於展示數據、刪除、修改數據
    var  ListTodo = React.createClass({
        
        render:function(){
            return(
                <ul id="todolist">
                {
                       //遍歷數據
                    this.props.todo.map(function(item,i){
                return(
                        <li>
                           <span>{item}</span>
                           <button>刪除</button>
                           <button >修改</button>
                        </li>
                       )
                    }
                }
                </ul>
            );
        }
    });
　　React.render(<TodoList />，document.body）；                                

　　此時只要在父組件的state中添加數據就可以在子組件中展示數據了。

 

 

增加數據:

　　　在react中只要state發生改變，組件就會重新渲染一遍，所以數據的增加就是通過改變state來增加的。如何改變state呢，就是通過輸入框組件的事件來改變數值然后再通過回調來改變state。

 

    var TodoList  = React.createClass({
        getInitialState:function(){
            return{
            //state用來控制todolist
                todolist:[]
            };
        },

        handleChange:function(rows){
            //當發生增刪改查時改變state重新渲染
            this.setState({
                todolist:rows
            });
        },



        render:function(){
            return(
                //添加子組件
                <div>
                    <TypeNew todo={this.state.todolist} add={this.handleChange}/>
                    <ListTodo todo={this.state.todolist} />
                </div>
            );
        }
    });

                //輸入框組件
    var TypeNew = React.createClass({
        handleAdd:function(){
            //獲取真實DOM 虛擬DOM無法獲取表單元素的數據
            var inputDom = this.refs.inputnew.getDOMNode();
            //獲取數據
            var newthing = inputDom.value.trim();
            var rows = this.props.todo;
            //如果輸入的數據為空值則返回提示無法添加
            if(newthing == ""){
                alert("數據不能為空");
                return;
            }
            //在數組內添加新數據
            rows.push(newthing);
            //回調改變state
            this.props.add(rows);
            //清空輸入框
            inputDom.value = "";
        },
        render:function(){
            return(
                <form>
                    <input type="text" ref="inputnew" placeholder="typing a newthing todo" 
                    autoComplete="off" />
　　　　　　　　　　　　{//添加點擊事件}
                    <input type="button" value="提交" onClick={this.handleAdd}/>
                </form>
            );
        }
    });

 

 

刪除數據:

　　刪除數據與增加數據同理，通過props傳遞數據然后通過點擊事件回調給父組件改變state。

            //總組件
    var TodoList  = React.createClass({
        getInitialState:function(){
            return{
            //state用來控制todolist
                todolist:[]
            };
        },

        handleChange:function(rows){
            //當發生增刪改查時改變state重新渲染
            this.setState({
                todolist:rows
            });
        },



        render:function(){
            return(
                //添加子組件
                <div>
                    <TypeNew todo={this.state.todolist} add={this.handleChange}/>
                    <ListTodo todo={this.state.todolist} change={this.handleChange}/>
                </div>
            );
        }
    });


    //ListTodo 用於展示、修改、刪除數據
    var  ListTodo = React.createClass({
    
        //刪除數據
        handleDel:function(e){
            var rows = this.props.todo;
                   //獲取index
            var index = e.target.getAttribute("data-index");
                   //根據index刪除數據
            rows.splice(index,1);
                    //回調給父組件改變state
            this.props.change(rows);
        },

        render:function(){
            return(
                <ul id="todolist">
                    {
                        this.props.todo.map(function(item,i){
                            return(
                                <li>
                                    <span>{item}</span>
                                    <button onClick={this.handleDel} data-index={i} >刪除</button>
                                    <button >修改</button>
                                </li>

                            );
                        }.bind(this))
                    }
                </ul>
            );
        }
    });

 

修改數據:

　　我的實現思路是，在<ListTodo />子組件中設置state用於記錄是否按了修改按鈕，如果按了修改按鈕就將該處的list變成type框重新渲染，在type框進行修改后，點擊確認按鈕則發生事件然后回調給父組件更新事件。

    var TodoList  = React.createClass({
        getInitialState:function(){
            return{
            //state用來控制todolist
                todolist:[]
            };
        },

        handleChange:function(rows){
            //當發生增刪改查時改變state重新渲染
            this.setState({
                todolist:rows
            });
        },



        render:function(){
            return(
                //添加子組件
                <div>
                    <TypeNew todo={this.state.todolist} add={this.handleChange}/>
                    <ListTodo todo={this.state.todolist} change={this.handleChange}/>
                </div>
            );
        }
    });

                //輸入框組件
    var TypeNew = React.createClass({
        handleAdd:function(){
            //獲取真實DOM 虛擬DOM無法獲取表單元素的數據
            var inputDom = this.refs.inputnew.getDOMNode();
            //獲取數據
            var newthing = inputDom.value.trim();
            var rows = this.props.todo;
            //如果輸入的數據為空值則返回提示無法添加
            if(newthing == ""){
                alert("數據不能為空");
                return;
            }
            //在數組內添加新數據
            rows.push(newthing);
            //回調改變state
            this.props.add(rows);
            //清空輸入框
            inputDom.value = "";
        },
        render:function(){
            return(
                <form>
                    <input type="text" ref="inputnew" placeholder="typing a newthing todo" 
                    autoComplete="off" />
                    <input type="button" value="提交" onClick={this.handleAdd}/>
                </form>
            );
        }
    });

    //ListTodo 用於展示、修改、刪除數據
    var  ListTodo = React.createClass({
        //子組件state用於記錄修改狀態
        getInitialState:function(){
            return{
                //changenum記錄是哪一個list要修改,changevalue記錄要修改的list的值
                changenum:-1,
                changevalue:""
            }
        },
        
        //刪除數據
        handleDel:function(e){
            var rows = this.props.todo;
            var index = e.target.getAttribute("data-index");
            rows.splice(index,1);
            this.props.change(rows);
                        //防止修改后按刪除按鈕產生bug
            this.setState({
                changenum:-1
            });
        },
                //點擊修改按鈕后改變state
        handleChange:function(e){
            var index=e.target.getAttribute("data-index");
            var msg =this.props.todo[index];
            this.setState({
                changenum:index,
                changevalue:msg
            });
        },
                 //react中設置了value后無法進行輸入，根據API 此辦法解決
        handleText:function(e){
            this.setState({
                changevalue:e.target.value
            })
        },
              //保存事件 獲取修改后的數據 與增加數據同理
        handleSave:function(){
            var inputDom = this.refs.inputnew.getDOMNode();
            var newthing = inputDom.value.trim();
            var rows = this.props.todo;
            if(newthing == ""){
                alert("數據不能為空");
                return;
            }
            var index = this.state.changenum;
                  //rows[index]改變為新的數據
            rows[index] = newthing;
                 //回調
            this.props.change(rows);
                  //改變當前state回到展示狀態
            this.setState({
                changenum:-1
            });                
        },

        render:function(){
            return(
                <ul id="todolist">
                    {
                        this.props.todo.map(function(item,i){
                                      //如果有點擊修改則將此處渲染成type框
                            if(this.state.changenum == i)
                            {
                                return(
                                    <li>
                                        <input type="text" ref="inputnew" value={this.state.changevalue} onChange={this.handleText} />
                                        <button onClick={this.handleSave} >確定</button>
                                    </li>            
                                )
                            }
                            else{
                                return(
                                    <li>
                                        <span>{item}</span>
                                        <button onClick={this.handleDel} data-index={i} >刪除</button>
                                        <button onClick={this.handleChange} data-index={i} >修改</button>
                                    </li>

                                );
                            }
                        }.bind(this))
                    }
                </ul>
            );
        }
    });

            
            React.render(<TodoList />,
                document.body    
            );            

 

總結：

　　感覺React的框架確實挺好用！這種模塊化的思想太棒了，以前寫東西都是一個功能一個功能的寫，改起來好麻煩= =，react感覺就不同，感覺模塊化的構造能讓整個代碼結構更清晰，希望之后能學習更多react知識啊。