成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

react實(shí)現(xiàn)選中的li高亮

duan199226 / 1804人閱讀

摘要：頁面上有很多個(gè)，要實(shí)現(xiàn)點(diǎn)擊到哪個(gè)就哪個(gè)高亮。當(dāng)年用的時(shí)候，也挺簡單的，就是選中的元素給，然后它的兄弟元素再寫個(gè)的樣式就搞定了。那現(xiàn)在用要實(shí)現(xiàn)類似的操作，我想到的就是用一個(gè)通過判斷在哪個(gè)元素實(shí)現(xiàn)切換。

雖然只是一個(gè)簡單的功能，還是記錄一下比較好。頁面上有很多個(gè)li，要實(shí)現(xiàn)點(diǎn)擊到哪個(gè)就哪個(gè)高亮。當(dāng)年用jq的時(shí)候，也挺簡單的，就是選中的元素給addClass，然后它的兄弟元素removeClass,再寫個(gè)active的樣式就搞定了。那現(xiàn)在用react要實(shí)現(xiàn)類似的操作，我想到的就是用一個(gè)currentIndex,通過判斷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)整",
                            "安全加固", "性能控制", "日志查詢", "業(yè)務(wù)分析"];
        let itemList = [];
        for(let i = 0; i < categoryArr.length; i++) {
            itemList.push(
  • {categoryArr[i]}
    • );
        }
        return 
      {itemList}
    
    }
}

    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的時(shí)候給元素添加一個(gè)index標(biāo)志位，然后點(diǎn)擊的時(shí)候，把這個(gè)index用event.currentTarget.getAttribute("index")取出來，然后去設(shè)置currentIndex的值，再寫一寫css的active樣式就搞定了。

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113363.html

    相關(guān)文章

    • task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

      摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。 轉(zhuǎn)載自我的個(gè)人博客 歡迎大家批評指正 包括5部分： 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...

      cnTomato 評論0 收藏0

    • task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

      摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。 轉(zhuǎn)載自我的個(gè)人博客 歡迎大家批評指正 包括5部分： 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...

      趙春朋 評論0 收藏0

    • 前端開發(fā)VScode常用插件

      摘要：名稱功能自動(dòng)閉合標(biāo)簽自動(dòng)提示修改標(biāo)簽時(shí)，自動(dòng)修改匹配的標(biāo)簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運(yùn)行選中代碼段支持大量語言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色 名稱 功能 Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽 Auto Import...

      hellowoody 評論0 收藏0

    • vscode常用插件【全了】

      摘要：插件集待補(bǔ)充。。。同時(shí)，它還包含了用于轉(zhuǎn)換為格式和生成數(shù)據(jù)模式的選項(xiàng)用于壓縮合并和文件的應(yīng)用程序。它提供了大量自定義的設(shè)置，以及自動(dòng)壓縮保存并導(dǎo)出為文件的選項(xiàng)。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題 插件集 待補(bǔ)充。。。 20180903 文件 【Path Intellisense】 自動(dòng)補(bǔ)全路徑 瀏覽器 【Open-In-Browser】在...

      kyanag 評論0 收藏0

    • vscode常用插件【全了】

      摘要：插件集待補(bǔ)充。。。同時(shí)，它還包含了用于轉(zhuǎn)換為格式和生成數(shù)據(jù)模式的選項(xiàng)用于壓縮合并和文件的應(yīng)用程序。它提供了大量自定義的設(shè)置，以及自動(dòng)壓縮保存并導(dǎo)出為文件的選項(xiàng)。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題 插件集 待補(bǔ)充。。。 20180903 文件 【Path Intellisense】 自動(dòng)補(bǔ)全路徑 瀏覽器 【Open-In-Browser】在...

      xcc3641 評論0 收藏0

    發(fā)表評論

    0條評論

    閱讀需要支付1元查看
    <