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

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

虽然只是一个简单的功能，还是记录一下比较好。http://页面上有很多个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)

})

}

renderhttp://() {

let categoryArr = ['产品调整', '接口流量', '负载均衡', '第三方软件调整',

'安全加固', '性能控制', '日志查询', '业务分析'];

let itemList = [];

for(let i = 0; i < categoryArr.length; i++) {

itemList.push(

className={this.state.currentIndex === i ? 'active' : ''}

index={i} onClick={this.setCurrentIndex}

>{categoryArr[i]}

}

return

}

}

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。