使用react怎么点击选中的li高亮

使用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;         }      }

看完上述内容，你们掌握使用react怎么点击选中的li高亮的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！