React自学笔记（五）---react相关的Todolist事项的增删和状态转换

Todolist.js：

import React, { Component } from 'react';
import '../assets/css/index.css'

class Todolist extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            username:"111",
            list:[
                {
                    title:"录制ionic",
                    checked:true
                },
                {
                    title:"录制nodejs",
                    checked:false
                },
                {
                    title:"录制vue",
                    checked:false
                },
                {
                    title:"录制angularjs",
                    checked:false
                },
            ]
         };
    }
    
    removeData=(key)=>{
        // alert(key)
        var templateList=this.state.list;
        templateList.splice(key,1)
        this.setState({
            list:templateList
        })
    }

    addData=(e)=>{
        //按下回车的时候下方添加事件
        if(e.keyCode==13){
            // alert(title)
            let title=this.refs.title.value
            let templateList=this.state.list;
            templateList.push({
                title:title,
                checked:false
            })

            //改变后的值赋值给list
            this.setState({
                list:templateList
            })
            this.refs.title.value=""   //表单置为空
        }
        
    }

    checkboxChange=(key)=>{
        let templateList =this.state.list;
        templateList[key].checked=!templateList[key].checked      
        this.setState({
            list:templateList
        })
    }


    render() {
        return (
            <div>
                {/* <h2>双休数据绑定</h2> */}
                {/* model改变影响View view改变反过来影响model */}
                {/* <input value={this.state.username} onChange={this.inputChange} />
               <br />
               <p>{this.state.username}</p> 
               <button onClick={this.setUsername}>改变username的值</button> */}
{/* 
            <h2>React Todolist案例演示</h2>

            <input ref="title" /><button onClick={this.addData}>增加</button>
            <hr />
            <ul className="list">
                {
                    this.state.list.map((value,key)=>{
                        return(
                            <li key={key}>
                    {value} --- <button onClick={this.removeData.bind(this,key)}>删除</button>
                </li>
                        )
                    })
                }

                
            </ul> */}

            <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></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.checked)} />

                                {value.title+"        "}
                                <button onClick={this.removeData.bind(this,key)}>删除</button>
                            </li>
                            
                        )
                    }
                })
            }

            </ul>
            </div>
            
        );
    }
}

export default Todolist;

注意事项的状态，在先完成列表的增删功能后再考虑状态的转换。