react實(shí)現(xiàn)點(diǎn)擊選中的li高亮的示例代碼
雖然只是一個(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)文章
windows下create-react-app 升級(jí)至3.3.1版本踩坑記
這篇文章主要介紹了windows下create-react-app 升級(jí)至3.3.1版本踩坑記，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家詳細(xì)介紹了React處理復(fù)雜圖片樣式的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
構(gòu)建高性能?React?應(yīng)用程序的關(guān)鍵之一是避免不必要的重新渲染,React?的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至關(guān)重要,在這篇文章中,我們將介紹常見(jiàn)錯(cuò)誤以及如何避免它們,需要的朋友可以參考下2024-10-10
React中jquery引用的實(shí)現(xiàn)方法
這篇文章主要介紹了React中jquery引用的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
在React中,解析HTML標(biāo)簽通常是使用JSX（JavaScript XML）語(yǔ)法的一部分,這篇文章主要介紹了React 用來(lái)解析html 標(biāo)簽的方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08![React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent](http://img.jbzj.com/images/xgimg/bcimg5.png)
React報(bào)錯(cuò)Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React和Vue中實(shí)現(xiàn)錨點(diǎn)定位功能
在React中,可以使用useState和useEffect鉤子來(lái)實(shí)現(xiàn)錨點(diǎn)定位功能,在Vue中,可以使用指令來(lái)實(shí)現(xiàn)錨點(diǎn)定位功能,在React和Vue中實(shí)現(xiàn)錨點(diǎn)定位功能的方法略有不同,下面我將分別介紹,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
react中通過(guò)props實(shí)現(xiàn)父子組件間通信的使用示例
在React中,父組件可以通過(guò)props屬性向子組件傳遞數(shù)據(jù),子組件可以通過(guò)props屬性接收父組件傳遞過(guò)來(lái)的數(shù)據(jù),本文就來(lái)介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-10-10
關(guān)于react-router/react-router-dom v4 history不能訪問(wèn)問(wèn)題的解決
這篇文章主要給大家介紹了關(guān)于react-router/react-router-dom v4 history不能訪問(wèn)問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫(kù)使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10