react实现TODOlist修改版

import React,{Component} from 'react';

import '../assets/css/index.css';

 

class Todolist extends Component{

    constructor(props){

        super(props);

        this.state={

          list:[

              {

                  title:'录制a',

                  checked:true

              },

              {

                title:'录制b',

                checked:false

            },

            {

                title:'录制c',

                checked:true

            },

            {

                title:'录制d',

                checked:false

            },

            {

                title:'录制e',

                checked:true

            },

          ]

        }

    }

    addData=(e)=>{

       //按下回车的时候再增加

       if(e.keyCode==13){

           //获取dom节点的数据

           let title=this.refs.title.value;

           let tempList=this.state.list;

           tempList.push({

               title:title,

               checked:false

           })

           //改变后的值赋值给list

           this.setState({

               list:tempList

           })

                //表单置换为空

                this.refs.title.value='';

       }

    }

    checkboxChange=(key)=>{

        let tempList=this.state.list;

        tempList[key].checked=!tempList[key].checked;

        //改完之后把值赋值给list

        this.setState({

            list:tempList

        })

          

 

    }

    removeData=(key)=>{

     let tempList=this.state.list;

     tempList.splice(key,1);

      //改完之后把值赋值给list

      this.setState({

        list:tempList

    })

 

    }

 

    render(){

        return(

            <div>

                //设置一个鼠标按下的事件

              <header className="title"> Todolist <input ref="title" onKeyUp={this.addData} /> </header>

              

 

               <h2>待办事项</h2>

                <hr/>

 

                <ul>

        {

            this.state.list.map((value,key)=>{

                if(!value.checked){

                    return(

                        <li>

                    

                              <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key)}/>

                              {value.title}

                              <button onClick={this.removeData.bind(this,key)}>删除</button>

                        </li>

                       

                    )

                }

            })

        }

            </ul>

               <h2>已完成事项</h2>

               <hr/>

               {

            this.state.list.map((value,key)=>{

                if(value.checked){

                    return(

                        <li>

                    

                              <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key)}/>

                              {value.title}

                              <button onClick={this.removeData.bind(this,key)}>删除</button>

                        </li>

                       

                    )

                }

            })

        }

 

            </div>

        )

    }

}

 export default Todolist;