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