react實現(xiàn)點擊選中的li高亮的示例代碼
更新時間：2018年05月24日 09:51:07 作者：supportlss
本篇文章主要介紹了react實現(xiàn)選中的li高亮的示例代碼，頁面上有很多個li，要實現(xiàn)點擊到哪個就哪個高亮。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
雖然只是一個簡單的功能，還是記錄一下比較好。頁面上有很多個li，要實現(xiàn)點擊到哪個就哪個高亮。當(dāng)年用jq的時候，也挺簡單的，就是選中的元素給addClass，然后它的兄弟元素removeClass,再寫個active的樣式就搞定了。那現(xiàn)在用react要實現(xiàn)類似的操作，我想到的就是用一個currentIndex,通過判斷currentIndex在哪個元素實現(xiàn)切換。
先上一下效果圖：
代碼：
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>
}
}
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標(biāo)志位，然后點擊的時候，把這個index用event.currentTarget.getAttribute('index')取出來，然后去設(shè)置currentIndex的值，再寫一寫css的active樣式就搞定了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近項目為了避免用戶誤操作導(dǎo)致數(shù)據(jù)丟失,增加返回攔截功能,但是之前由于qiankun的報錯導(dǎo)致這個功能一直有一些問題,所以專門獨立搞了一個專題研究在react中各種方式實現(xiàn)這個功能,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了React-Native 環(huán)境搭建和基本介紹的相關(guān)資料,包括react native優(yōu)缺點，通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了React使用State?Hook的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
內(nèi)存泄漏是指程序中分配的內(nèi)存未能正確釋放,導(dǎo)致內(nèi)存占用不斷增加,最終可能影響應(yīng)用性能甚至崩潰,在React中,內(nèi)存泄漏常發(fā)生于組件卸載后,本文將詳細(xì)介紹內(nèi)存泄漏在React中的常見原因及避免策略,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了在React項目中使用TypeScript詳情，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家介紹了Remix路由模塊輸出對象loader函數(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-04-04
本篇文章主要介紹了React Native懸浮按鈕組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2018-04-04
這篇文章主要介紹了react的hooks的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
React根據(jù)當(dāng)前頁面路由進(jìn)行自動高亮示例代碼
要根據(jù)當(dāng)前頁面路由自動高亮頂部菜單項,可以使用 React Router 的 useLocation 鉤子來獲取當(dāng)前路徑,并根據(jù)路徑動態(tài)設(shè)置菜單項的高亮效果,本文給大家介紹了一個完整的示例,展示如何根據(jù)當(dāng)前頁面路由自動高亮頂部菜單項,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了React中Props的淺對比的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-05-05