• react+redux官方实例TODO从最简单的入门(5)-- 查


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

    这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有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,规定的方法一般在其父级...)

     

    
    
    
  • 相关阅读:
    UWP中实现大爆炸效果(二)
    UWP中实现大爆炸效果(一)
    c# 【电影搜索引擎】采集电影站源码
    安利一个聚合搜索导航站,及怎么样设置成默认的搜索引擎
    女朋友经常问影视剧, 答不上来怎么办?
    宝塔linux面板, 服务器日志分析与流量统计这款插件的mysql版优化。
    苹果cms自动采集,重复执行遇到“上次执行时间: --跳过”的解决办法
    苹果cms, 后台设置保存不了的解决办法
    解决 C:WINDOWSsystem32inetsrv ewrite.dll 未能加载。返回的数据为错误.
    img error 图片加载失败的最佳方案
  • 原文地址:https://www.cnblogs.com/heigehe/p/6246566.html
Copyright © 2020-2023  润新知