react+redux官方執行個體TODO從最簡單的入門（5）-- 查

標籤：接下來   ges   png   active   bsp   height   組件   show   tor   

上一篇文章《改》實現了，最後一個功能--《查》！

這個查是稍微要複雜一點的功能，官方實現的就是一個過濾數組的效果，然後展示出來，這裡有3個狀態，all，completed，active。

要實現這三個狀態之前，我們需要提前實現一個功能，那就是給每個展示的子組件一個可改變是completed還是active的狀態的屬性（方法）--- 這樣才能有可查（篩選）的東西嘛

老規矩：

1、聲明狀態

2、actions

3、reducer

4、component

好了，看看效果

似乎還差一個，官網的是有斜線的啊！別著急，只是一個class的問題，我們來加上

 

這樣就實現了！

到這裡，給每個子組件添加狀態已經實現了，下一步我們就應該‘查‘（過濾）了

那麼編寫一個組件來實現過濾數組，根據子組件的completed狀態來顯示

首先我們先把底部view實現了，再慢慢的添加功能

 把Footer放到這裡，是因為要用到這裡面的狀態，關聯起來很方便

 

已經展示出來了，現在就添加樣式和功能吧

先添加樣式：

 

 簡單的樣式就展示出來了，下面添加功能吧

首先我們要給三個狀態設定不同的函數，得到我們想要的數組

這裡寫好後，下面就是對這個調用，對應的就不用多說了吧

這裡簡單說下吧，在MainSection中，有個

返回all，completed，active三個狀態，在下面通過他去調用他的傳回值！filter用法就不多說了。

在Footer中，傳入filter參數

這個onShow函數來自 

這個方法的作用是改變filter的值，這個filter來自Footer的這裡

通過點擊，傳入對應的filter，然後這個filter，就可以區過濾數組了

整個過程看似簡單，其實包含的知識點真的非常多，好了，到這裡，基本就實現了查的功能，現在看看效果吧！

到這裡，我們已經實現了增-刪-改-查，四個功能，當然官網裡還有其他功能，接下來最後一遍文章裡，我們將把所有功能都增加上，其實到這裡不難發現，其實要實現一個功能就那麼回事

聲明狀態 一個常量 

約定一個將要執行的函數

執行函數更新store

view層面寫好方法，一層一層往上傳遞！（邏輯執行一般寫在最底層view，規定的方法一般在其父級...）

 

 

 

 

 

 

 

 

 

 

react+redux官方執行個體TODO從最簡單的入門（5）-- 查