上一篇文章《改》实现了,最后一个功能--《查》!

这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有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)-- 查的更多相关文章

  1. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  2. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  3. react+redux官方实例TODO从最简单的入门(2)-- 增

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  4. react+redux官方实例TODO从最简单的入门(4)-- 改

    上一篇文章实现了<删>这个功能,那么我们继续添加下一功能--<改> 这个修改的功能是通过双击每个子选项实现 第一步:按规矩来,添加一个状态声明 第二步:action中约定我们要 ...

  5. react+redux官方实例TODO从最简单的入门(3)-- 删

    上一篇文章我们实现了增删改查中<增>这个功能 那么这一篇我们将实现第二个功能,删! 首先增加一个状态: actions中增加对应的约定 到reducer里面设置执行的函数(这里todo.i ...

  6. 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  7. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

  8. 用react+redux写一个todo

    概述 最近学习redux,打算用redux写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:

  9. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

随机推荐

  1. Hibernate 中出现表名(XXX) is not mapped 问题

    今天晚上自己试着用Hibernate去搭建一个Web工程,然后去实现一个简单的登录.通过Hibernate?做查询操作的时候总是报出这样的错:users is?not?mapped. 于是乎去检查了下 ...

  2. SQL Check

    一款实时性能监测工具 SQL Check? 一款实时监测SQL数据库性能.实时排查的问题的免费工具. 可以实时监测20个左右的SQL关键性能指标,每个指标都已图形化动态直播形式展现. 适合DBA.数据 ...

  3. [LeetCode] Word Squares 单词平方

    Given a set of words (without duplicates), find all word squares you can build from them. A sequence ...

  4. [LeetCode] N-Queens II N皇后问题之二

    Follow up for N-Queens problem. Now, instead outputting board configurations, return the total numbe ...

  5. [LeetCode] Permutations 全排列

    Given a collection of numbers, return all possible permutations. For example,[1,2,3] have the follow ...

  6. Anna-senpai帖子翻译与Mirai源代码使用

    Anna-senpai这个人太好玩了,整件事就像没有黄段子的无聊世界那样. 无聊翻译了一下,顺便实验了效果. --------------------------------------------- ...

  7. Goodbye 2016 总结与展望

    今天居然是2016年的最后一天了,写点什么回忆吧. 2016开始的时候我刚拿到普及组一等奖,还只是压线,水平很差.学校并不知道这有多差,于是狠狠宣传这所谓的"光荣事迹".那段时间我 ...

  8. 【Pyhon 3】: 170104:优品课堂: GUI -tkinter

    from tkinter import * root = Tk() root.title("BMS 图书管理系统") lbl = Label(root, text='书名:') # ...

  9. c++中的lambda特性

    来源: http://www.jb51.net/article/56147.htm cocos2dx3.0测试: 1.有参数a,b printf("lambda=%lf", []( ...

  10. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...