zoukankan      html  css  js  c++  java
  • 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,规定的方法一般在其父级...)

     

    
    
    
  • 相关阅读:
    YGC问题排查,又让我涨姿势了!
    AI时代,还不了解大数据?
    实战篇:一个核心系统 3 万行代码的重构之旅
    监控系统选型,这篇不可不读!
    实时离线一体大数据在资产租赁saas服务中使用
    基于监控服务打造微服务治理生态体系
    CDH6.3.2升级Hive到4.0.0
    强化学习 9 —— DQN 改进算法DDQN、Dueling DQN tensorflow 2.0 实现
    强化学习 8 —— DQN 算法 Tensorflow 2.0 实现
    强化学习 7——Deep Q-Learning(DQN)公式推导
  • 原文地址:https://www.cnblogs.com/heigehe/p/6246566.html
Copyright © 2011-2022 走看看