react--todoList

代码

• 学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353

import React, { Component } from 'react'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { title: "任务一", checked: false },
                { title: "任务二", checked: true },
                { title: "任务三", checked: false },
                { title: "任务四", checked: true },
                { title: "任务五", checked: false },
                { title: "任务六", checked: true }
            ]
        }
    }

    add = (e) => {
        if (e.keyCode === 13) {
            let title = this.refs.title.value;
            let checked = false;
            let obj = { title, checked };
            let tempList = this.state.list;
            tempList.push(obj);
            this.setState({
                list: tempList
            })
            this.refs.title.value = "";
        }

    }
   remove = (index) => {
        
            let tempList = this.state.list;
            tempList.splice(index,1);
            this.setState({
                list: tempList
            })
    }



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

    render() {
        return (
            <div> 
                <p>react实现todoList</p> 
                添加:<input ref="title" type="text" onKeyUp={this.add} /> 
                <hr/>
                
              <p>未做</p>
               
                <ul>{
                   this.state.list.map((item,key)=>{
                       if(!item.checked){
                         return ( <li key={key}> <input  type="checkbox"   checked={item.checked} onChange={this.checkboxChange.bind(this,key,item.checked)} />{item.title}</li>)
                       }
                       return null;
                }) 
             }
            </ul>
            <p>已做</p>
                 <ul>{
                   this.state.list.map((item,key)=>{
                       if(item.checked){
                         return ( <li key={key}> <input  type="checkbox"   checked={item.checked} onChange={this.checkboxChange.bind(this,key,item.checked)} />{item.title}<span onClick={this.remove.bind(this,key)}>----删除</span></li>)
                       }
                       return null;
                }) 
             }
            </ul>
            </div>
        )
    }

}

    export default App;