国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

react實現點擊選中的li高亮的示例代碼

來源:懂視網 責編:小采 時間:2020-11-27 22:14:05
文檔

react實現點擊選中的li高亮的示例代碼

react實現點擊選中的li高亮的示例代碼:雖然只是一個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點擊到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addClass,然后它的兄弟元素removeClass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想
推薦度:
導讀react實現點擊選中的li高亮的示例代碼:雖然只是一個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點擊到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addClass,然后它的兄弟元素removeClass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想

雖然只是一個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點擊到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addClass,然后它的兄弟元素removeClass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想到的就是用一個currentIndex,通過判斷currentIndex在哪個元素實現切換。

先上一下效果圖:


代碼:

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

是不是很簡單呢。就是在生成這些li的時候給元素添加一個index標志位,然后點擊的時候,把這個index用event.currentTarget.getAttribute('index')取出來,然后去設置currentIndex的值,再寫一寫css的active樣式就搞定了。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

react實現點擊選中的li高亮的示例代碼

react實現點擊選中的li高亮的示例代碼:雖然只是一個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點擊到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addClass,然后它的兄弟元素removeClass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想
推薦度:
標簽: 選中 點擊 高亮
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 日韩欧美片 | 91精品一区二区三区在线观看 | 第一页亚洲| 久久久亚洲欧美综合 | 国产成人91一区二区三区 | 亚洲第一区视频 | 欧美一级视频在线观看 | 另类专区另类专区亚洲 | 国产一区在线免费观看 | 亚洲欧美一区二区三区不卡 | 国产欧美第一页 | 亚洲欧洲在线视频 | 在线观看日韩精品 | 国产一区二区在线免费观看 | 中文字幕有码在线观看 | 久久久国产成人精品 | 精品日韩在线 | 毛片免费网 | 欧美中出| 伊人中文 | 一区二区三区精品 | 91精品国产综合久久久久久 | 国产亚洲精品成人婷婷久久小说 | 欧美色图亚洲自拍 | 欧美一区二区三区视视频 | 欧美日韩国产精品综合 | 国产精品久久网 | 91精品一区二区三区在线观看 | 亚洲国产日韩欧美在线as乱码 | 可以看的毛片 | 91香蕉国产亚洲一区二区三区 | 日韩视频在线观看一区二区 | 日韩视频区 | 一级毛片私人影院免费 | 黄色在线免费观看网址 | 免费观看的黄色网址 | 亚洲三级电影网 | 欧美日韩精品高清一区二区 | 欧美一级成人影院免费的 | 国产精品视频第一区二区三区 | 伊人中文字幕 |