我們在原來07demo的基礎上又要添加一些新的功能！如下圖所示

老規(guī)矩還是拆分組件

新的功能目錄結構如下圖所示：

????????這一次父子組件的js代碼居然超過了200行，大大出乎了明哥的預料，那么在這里我重點講述一下最后全選全不選的功能。在之前幾天學習的日子里，我們可以知道，組件中的state屬性是用來存儲一些數(shù)據(jù)的，如果在子組件中想要修改父組件的state，則需要在父組件中定義修改的方法，通過props傳入到子組件中，然后子組件調用props傳入的父組件方法去修改父組件的屬性，同樣，全選全不選也是如此

? ? ? ? 首先state中定義一個默認值?isAllDone =false? 代表默認全不選 ，將這個isAllDone?傳入到footer組件中，使footer組件全選框默認為?未選中狀態(tài)，而當全選框發(fā)生了變化，立即在子組件中調用父組件props傳入的changeAllChecked方法，將父組件state中todos的所有值全部修改為isAllDone取反。

? ? ? ? 看上去思路貌似很簡單，但是明哥認為真正的核心部分就是下圖

????????js中filter函數(shù)，會對數(shù)組中每一個元素都執(zhí)行一下指定的函數(shù)，將返回為true的元素?拼成一個新的數(shù)組，然后箭頭函數(shù)(todo =>!todo.isDone)? 等價于? function（todo）return(!to.isDone),這里就會獲取所有未被選中元素的一個數(shù)組，然后無論你添加，刪除任意一個元素都會去判斷?未被選中的元素長度是否為0，并且數(shù)組總長度大于0，如果成立，則全選框勾選狀態(tài)保持存在，如果不存在全選框勾選狀態(tài)消失

附上代碼如下

App.js

TodoHeader

TodoMain

TodoItem

TodoFooter

sass樣式代碼