React implementiert die Methode, das ausgewählte Li hervorzuheben, wenn Sie darauf klicken

In diesem Artikel wird hauptsächlich der Beispielcode für React vorgestellt, um das ausgewählte Li hervorzuheben. Es gibt viele Li auf der Seite, und Sie möchten dasjenige hervorheben, auf das Sie klicken. Der Inhalt ist ziemlich gut. Ich möchte ihn jetzt mit Ihnen teilen und als Referenz geben.

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.

Zuerst das Rendering:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in React Native mit Flexbox-Layout

Implementierungsmethode von SSR basierend auf React und Redux

Das obige ist der detaillierte Inhalt vonReact implementiert die Methode, das ausgewählte Li hervorzuheben, wenn Sie darauf klicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!