Ausführliche Erläuterung der Schritte zum Hervorheben von durch Klicken ausgewählten Li in React

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Hervorheben des durch Klicken auf „Reagieren“ ausgewählten Li geben Praktischer Fall, werfen wir einen Blick darauf. 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 Darstellungen 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.length; i++) {
      itemList.push(<li key={i}
               className={this.state.currentIndex === i ? &#39;active&#39; : &#39;&#39;}
               index={i} onClick={this.setCurrentIndex}
             >{categoryArr[i]}</li>);
    }
    return <ul className="category">{itemList}</ul>
  }
}

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 nicht es 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 Verwendung der JS-Array-Methode

Detaillierte Erläuterung der Schritte zur Verwenden Sie die JS-String-Methode

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum Hervorheben von durch Klicken ausgewählten Li in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!