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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
ExtJS 入门
2010/10/29 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
软件测试常见笔试题
2012/02/04 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
后勤自我鉴定
2013/10/13 职场文书
酒店服务与管理毕业生求职信
2013/11/02 职场文书
中学生自我评价范文
2014/02/08 职场文书
销售提升方案
2014/06/07 职场文书
违章停车检讨书
2014/10/21 职场文书
展览会邀请函
2015/02/02 职场文书
党员进社区活动总结
2015/05/07 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers