React基于类组件实现todoList

类组件实现todoList

import React, { Component } from 'react';

class TodoList extends Component {
    myref=React.createRef()
  constructor (props) {
      super (props);
      this.state={
          todos:[
              {id:1,title:'吃饭',done:false},
              {id:2,title: '睡觉',done: true},
              {id:3,title: '学习',done: true}
          ]
      }
  }
    //执行添加
    handleAdd(){
    //    获取input值
        const value=this.myref.current.value
        //不能直接对state的值进行修改，会造成不可预期的错误
        // this.state.todos.push({id:new Date().getTime(),title:value,done:false})
        //需要对原来的state进行复制，对新的对象操作
        const newTodo=[...this.state.todos]
        //对输入的input值进行校验
       var flag= newTodo.some(item=>item.title==value)
        if (!flag){
            newTodo.push({id:new Date().getTime(),title:value,done:false})
            this.setState({
                todos:newTodo
            })
        }else {
            alert('数据重复')
        }

        this.myref.current.value=''
    }
    del(id){
        //在react中对状态的改变需要通过this.setstate()进行修改，不能直接修改，不然会发生不可预期的错误
        const newTodo=[...this.state.todos]
        this.setState({
            todos:newTodo.filter(item=>item.id!==id)
        })
    }
    checkHandle(id){
        console.log (id)
        const newTodo=[...this.state.todos]
        newTodo.forEach(item=>{
           if(item.id==id){
               item.done=!item.done
           }
       })
        this.setState({
            todos:newTodo
        })
    }
    render () {
        return (
            <div>
                <input type='text' ref={this.myref}/>
                <button onClick={()=>this.handleAdd()}>添加</button>
                <ul>
                    {
                        this.state.todos.map(item=>
                            <li key={item.id}>
                                <input type="checkbox" checked={item.done} onChange={()=>this.checkHandle(item.id)}/>
                                {item.title}
                                <button onClick={()=>this.del(item.id)}>删除</button>
                           </li>)
                    }
                </ul>
            </div>
        );
    }
}

export default TodoList;
注意实现：在react中，对状态的修改不能直接修改this.state,而是要通过this.setState({})来进行修改