React学习08----demo练习2

React学习08----demo练习2
继续完成todolist的功能
http://www.todolist.cn
效果：

项目结构：

源码：
TodoList.js

import React from 'react';
class TodoList extends React.Component{
    constructor(props) {
        super(props);
        // 数据：
        this.state={
            name:'TodoList',
            list:[
                {
                    title:'关羽',
                    checked:true
                },
                {
                    title:'张飞',
                    checked:false
                }
                ,
                {
                    title:'赵云',
                    checked:true
                } ,
                {
                    title:'马超',
                    checked:false
                }
            ]
        }
    }
    //添加数据
    addOnClick=()=>{
    //    拿到输入的数据
      let title = this.refs.data.value;
    //    拿到构造方法中的数据
      let tempList =  this.state.list;
    //  添加数据
        tempList.push({
            title:title,
            checked:false
        });
    //  构造方法中，重新赋值，自动刷新
        this.setState({
            list:tempList,
        })
    }
    //删除数据
    deleteData=(key)=>{
        //    获取 list 的值
        let tempList = this.state.list;
        //    根据key删除数据
        // key删除元素的下标，1删除元素的个数
        tempList.splice(key, 1);

        //    重新赋值，自动刷新
        this.setState({
            list: tempList,
        });
    }


    //多选框点击事件
    checkboxChage=(key)=>{
    //   拿到构造方法中的数据
        let tempList = this.state.list;
        tempList[key].checked = !tempList[key].checked;
    //  修改数据，自动刷新
        this.setState(
            {
                list:tempList,
            }
        )
    }




    // 渲染数据
    render() {
        return(
            

                
{this.state.name}
                {/* 输入框添加内容 */}
                

                添加+
                


                {/*待办事项*/}
                
待办事项

                


                

                    {
                        this.state.list.map((value,key)=>{
                            if(!value.checked){
                                return (
                                    

                                        
                                        {value.title}-- 删除
                                    
                                )
                            }

                        })
                    }
                

                {/* 已完成事项 */}
                
已完成事项
                

                

                    {
                    // 循环出list
                    this.state.list.map((value,key)=> {
                        if (value.checked){
                            //渲染数据
                            return(
                                

                                    
                                    {value.title}--删除
                                
                            );
                        }
                    })
                    }
                




            
        );
    }
}
export default TodoList;

源码下载：
https://download.csdn.net/download/zhaihaohao1/10980273
rdemo8