react實現選中的li高亮

duan199226 發布于2019-08-29 15:30 / 1719人閱讀

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

雖然只是一個簡單的功能，還是記錄一下比較好。頁面上有很多個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({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")取出來，然后去設置currentIndex的值，再寫一寫css的active樣式就搞定了。

GPU云服務器云服務器 react實現輪播圖選中的文本 jsp的li html的有序li

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113363.html

task0002（四）- 練習：數據處理、輪播及交互

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

cnTomato 2019-08-22 10:59 評論0 收藏0
task0002（四）- 練習：數據處理、輪播及交互

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

趙春朋 2019-08-01 15:00 評論0 收藏0
前端開發VScode常用插件

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

hellowoody 2019-08-21 18:21 評論0 收藏0
vscode常用插件【全了】

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

kyanag 2019-08-30 13:57 評論0 收藏0
vscode常用插件【全了】

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

xcc3641 2019-08-26 11:42 評論0 收藏0