React-实现一个li标签多选

先来描述一下遇到的问题:

条件1:父组件A调用子组件B,并传入了一个数组,在组件B中需要根据组件A传过来的数组遍历出一个个li 标签,并且能够实现对li标签的多选。

条件2:项目引用的图标是基于iconfont实现的,为了统一规则,图标只能在js中引用,不可以在css中引用,所以在代码中会一次性引入两个icon,那么到底显示哪个呢?那就需要css来解决了。

先看一下 iconfont 中我需要的两个 icon 

很明显,一个表示选中状态一个表示没有选中的状态,在代码中使用的规则如下:

刚刚说到,两个icon同时放到一个div中的话就会导致同时看到就会两个icon,这个时候div的className是一个变量“select”就是这里的关键,看一下select是如何设值的:

上面中的file就是数组的一个元素,刚开始的时候file没有isselected这个元素,也就是说file.isselected应该是等于undefined的,那么就是执行else语句,那么就应该是


然后在css里面进行布局设置:

1.如果没有选中,div的class就是select,那么就应该根据css的上半部分来显示,也就是显示.active的内容

2.如果选中,div的class就是 select active,会渲染上面的css,但是最终的效果还是下面的:显示alicon的内容,隐藏active的内容

这样就实现了他们之间的切换。

但是!!!

file.isselected这个值如何设置呢?

这个就需要通过state来实现了,给div绑定一个click事件:

这里只简单的说一下方法的思路,具体实现看上面的代码就可以了:

首先我们根据 点击的这个div绑定的file就可以获取到这个file的myid值(这里file是有这个值的,前面没交代清楚),然而 file 是属于allfilepackageList 数组中的某一个(请注意这里的某一个,我们现在还不知道具体是哪个),

我们就遍历allfilepackageList数组,然后将每一个值的myid和file的myid值进行比较,如果相等就是说明目前点击的就是这个file,那么它就被选中了(也有可能是被选中了或者取消选中),那么只需要将这个this.state.allfilepackageList【i】的isselected进行取反就可以了(如果原来被选中,就取消选中,设值为false;如果原来没有被选中,就选中,设值为true)

然后通过setState来重新渲染就可以实现了


写在最后面的话:

这篇文章是在实际项目中遇到的问题而“终结”出来的,说是终结还不如说是抄过来的,但是咱不怕。把别人的东西变成自己的东西那也是自己的是吧?

工作了半年之久,遇到了很多的问题,也很少总结。这篇所谓的总结也只是遇到问题、解决方法。然而没有更深入的理解里面的原理,甚至从始至终都没有看过源码。这是我自身一个很大的问题!

希望能找到好的方法总结学习,希望自己能够更勤奋!深挖,死究!努力提高自己的能力,变得强大!!!

戒躁!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为前端和后台最基础可靠的神器工具JQuery,你真的对她有足够了解么? 亚非拉地区苦逼的前端er们,有时候不得不...
    扭了个妞阅读 2,870评论 0 0
  • 简书Markdown编辑器测试文章目录为什么显示不出来 [TOC] 1.Git的四个部分 工作区/工作树/工作目录...
    yaoyuanyylyy阅读 1,820评论 0 0
  • 今天,脑海里思考的一个词:规划。人或者事业都离不开规划,甚至万事万物都要规划。规划好才能掌控全局,更适应沿着宇宙规...
    在亮阅读 1,651评论 0 0
  • 不知是不是临近毕业季的原因,最近总是回想起学生时代在图书馆里那些忘我的读书时光,从早到晚,从周一至周日,大脑仿佛被...
    米姜如一阅读 3,685评论 0 2
  • 22 交换角色 唐恩走进我办公室时,我正在准备向格兰毕报告的简报。 恭喜了!我向他打招呼。彼德刚打电话来,把你捧上...
    发现好物阅读 3,203评论 0 0