Detaillierte Erläuterung der Schritte zum Hervorheben ausgewählter Li in der React-Implementierung

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Hervorheben von li in der Reaktionsimplementierung geben. Was sind die Vorsichtsmaßnahmen für die Auswahl von li-Hervorhebung in der Reaktionsimplementierung? .

Obwohl es sich nur um eine einfache Funktion handelt, ist es besser, sie aufzuzeichnen. Es gibt viele Lis auf der Seite und das, auf das Sie klicken, wird hervorgehoben. Als ich damals jq benutzte, war es ganz einfach, das ausgewählte Element zu addClass hinzuzufügen, dann sein Geschwisterelement zu entfernen und dann einen aktiven Stil zu schreiben. Um nun React zum Implementieren ähnlicher Operationen zu verwenden, denke ich daran, einen currentIndex zu verwenden und zu wechseln, indem beurteilt wird, auf welchem ​​Element sich der currentIndex befindet.
Schauen wir uns zunächst die Renderings an:

Code:

    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[i]});
        }
        return 

{itemList}

    } }

CSS-Teil

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

Ist das nicht ganz einfach? Es besteht darin, dem Element beim Generieren dieser li ein Indexflag hinzuzufügen und dann beim Klicken event.currentTarget.getAttribute('index') zu verwenden, um den Index herauszunehmen, dann den Wert von currentIndex festzulegen und dann CSS zu schreiben Der Stil ist fertig.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Kombination von React mit TypeScript und Mobx

Detaillierte Erläuterung der Schritte zur Verwendung von React -router v4

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Hervorheben ausgewählter Li in der React-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!