react實(shí)現(xiàn)點(diǎn)擊選中的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 = ['產(chǎn)品調(diào)整', '接口流量', '負(fù)載均衡', '第三方軟件調(diào)整',
 '安全加固', '性能控制', '日志查詢', '業(yè)務(wù)分析'];
 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>
 }
}

 .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;
 }
 }