初学react---todolist实例

Posted 2020-08-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学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知识啊。

以上是关于初学react---todolist实例的主要内容，如果未能解决你的问题，请参考以下文章

react TodoList

React todolist案例和持久化实现