TodoList

**
**

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React, {
    Component } from 'react'
import {
   Header,List,Footer,Item} from './components';
import './App.css'
export default class App extends Component {
   

  //状态在哪里 操作状态的方法就在哪里
  //初始化状态
  state={
   
    todos:[
      {
   id:1,name:'吃饭',done:true},
      {
   id:2,name:'睡觉',done:true},
      {
   id:3,name:'打豆豆',done:false},

    ]
  }

  //addTodo用于添加一个todo  接收的参数是todo对象
  addTodo(todoObj){
   
    const {
   todos} = this.state
    this.setState({
   
      todos:[todoObj,...todos]
    })

  }

  //用于更新todo选中状态
  changeTodo =(id,done)=>{
   
    //和当前传来的id也就是当前点击的item进行匹配 匹配成功 修改done
    const newtodos= this.state.todos.map((todoObj)=>{
   
      if(todoObj.id === id)return {
   ...todoObj,done:done}
      else return todoObj
    })
    this.setState({
   todos:newtodos})
  }


  //用于删除todo的方法
  DelTodo = (id)=>{
   
    const newtodos =  this.state.todos.filter((todoObj)=>{
   
      return todoObj.id !== id
    })
    this.setState({
   todos:newtodos})
  }

//全选
  checkAll=(done)=>{
   
   const {
   todos