react实现点击选中的li高亮的示例代码


Posted in Javascript onMay 24, 2018

虽然只是一个简单的功能,还是记录一下比较好。页面上有很多个li,要实现点击到哪个就哪个高亮。当年用jq的时候,也挺简单的,就是选中的元素给addClass,然后它的兄弟元素removeClass,再写个active的样式就搞定了。那现在用react要实现类似的操作,我想到的就是用一个currentIndex,通过判断currentIndex在哪个元素实现切换。

先上一下效果图:

react实现点击选中的li高亮的示例代码

代码:

class Category extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentIndex: 0
    }
    this.setCurrentIndex = this.setCurrentIndex.bind(this)
  }
  setCurrentIndex(event) {
    this.setState({
      currentIndex: parseInt(event.currentTarget.getAttribute('index'), 10)
    })
  }
  render() {
    let categoryArr = ['产品调整', '接口流量', '负载均衡', '第三方软件调整',
              '安全加固', '性能控制', '日志查询', '业务分析'];
    let itemList = [];
    for(let i = 0; i < categoryArr.length; i++) {
      itemList.push(<li key={i}
               className={this.state.currentIndex === i ? 'active' : ''}
               index={i} onClick={this.setCurrentIndex}
             >{categoryArr[i]}</li>);
    }
    return <ul className="category">{itemList}</ul>
  }
}

css部分

.category {
      padding-left: 0;
      &:after {
        content: '';
        display: block;
        clear: both;
      }
      li {
        float: left;
        width: 23%;
        height: 40px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid $border-color;
        list-style: none;
        color: $font-color;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        &.active {
          border-color: #079ACD;
        }
     }

是不是很简单呢。就是在生成这些li的时候给元素添加一个index标志位,然后点击的时候,把这个index用event.currentTarget.getAttribute('index')取出来,然后去设置currentIndex的值,再写一写css的active样式就搞定了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
JavaScript实现登录窗体
Jun 22 Javascript
浅谈Webpack 是如何加载模块的
May 24 #Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
详解javascript中的变量提升和函数提升
May 24 #Javascript
JavaScript轮播停留效果的实现思路
May 24 #Javascript
vue2单元测试环境搭建
May 24 #Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 #Javascript
vue组件name的作用小结
May 23 #Javascript
You might like
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python yield 小结和实例
2014/04/25 Python
Python中的heapq模块源码详析
2019/01/08 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
2014年作风建设心得体会
2014/10/22 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
员工辞职信范文
2015/03/02 职场文书
材料员岗位职责范本
2015/04/11 职场文书
大学新生入学感想
2015/08/07 职场文书
2015元旦感言
2015/12/09 职场文书
会计专业自荐信范文
2019/05/22 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Python实现仓库管理系统
2022/05/30 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python