react实现选中的li高亮

duan199226 发布于2019-08-29 15:30 / 1696人阅读

摘要：页面上有很多个，要实现点击到哪个就哪个高亮。当年用的时候，也挺简单的，就是选中的元素给，然后它的兄弟元素再写个的样式就搞定了。那现在用要实现类似的操作，我想到的就是用一个通过判断在哪个元素实现切换。

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

代码：

    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({categoryArr[i]});
        }
        return {itemList}
    }
}

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样式就搞定了。

GPU云服务器云服务器 react实现轮播图选中的文本 jsp的li html的有序li

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113363.html

task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

cnTomato 2019-08-22 10:59 评论0 收藏0
task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

赵春朋 2019-08-01 15:00 评论0 收藏0
前端开发VScode常用插件

摘要：名称功能自动闭合标签自动提示修改标签时，自动修改匹配的标签格式化编写更加人性化的注释添加行书签的浏览器兼容性检查运行选中代码段支持大量语言，包括单词拼写检查在中弹出浏览器并搜索，可编辑搜索引擎颜色值在代码中高亮显示小窗口显示颜色值，等等拾色名称功能 Auto Close Tag 自动闭合HTML标签 Auto Import...

hellowoody 2019-08-21 18:21 评论0 收藏0
vscode常用插件【全了】

摘要：插件集待补充。。。同时，它还包含了用于转换为格式和生成数据模式的选项用于压缩合并和文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为文件的选项。修改文本的更多命名格式，包括驼峰命名下划线分隔命名，命名以及命名等切换漂亮的主题插件集待补充。。。 20180903 文件【Path Intellisense】自动补全路径浏览器【Open-In-Browser】在...

kyanag 2019-08-30 13:57 评论0 收藏0
vscode常用插件【全了】

摘要：插件集待补充。。。同时，它还包含了用于转换为格式和生成数据模式的选项用于压缩合并和文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为文件的选项。修改文本的更多命名格式，包括驼峰命名下划线分隔命名，命名以及命名等切换漂亮的主题插件集待补充。。。 20180903 文件【Path Intellisense】自动补全路径浏览器【Open-In-Browser】在...

xcc3641 2019-08-26 11:42 评论0 收藏0