成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

duan199226 / 1736人閱讀

摘要：頁面上有很多個，要實現(xiàn)點擊到哪個就哪個高亮。當(dāng)年用的時候，也挺簡單的，就是選中的元素給，然后它的兄弟元素再寫個的樣式就搞定了。那現(xiàn)在用要實現(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)整", "接口流量", "負載均衡", "第三方軟件調(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的時候給元素添加一個index標志位，然后點擊的時候，把這個index用event.currentTarget.getAttribute("index")取出來，然后去設(shè)置currentIndex的值，再寫一寫css的active樣式就搞定了。

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

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

    相關(guān)文章

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

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

      cnTomato 評論0 收藏0

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

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

      趙春朋 評論0 收藏0

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

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

      hellowoody 評論0 收藏0

    • vscode常用插件【全了】

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

      kyanag 評論0 收藏0

    • vscode常用插件【全了】

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

      xcc3641 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <