Explication détaillée des étapes pour mettre en évidence le li sélectionné par clic en réaction

Cette fois, je vais vous donner une explication détaillée des étapes pour mettre en évidence le li sélectionné en cliquant sur réagir. Quelles sont les précautions à mettre en œuvre pour mettre en évidence le li sélectionné en cliquant sur réagir. cas pratique, jetons un coup d'oeil.

Bien qu'il ne s'agisse que d'une fonction simple, il est préférable de l'enregistrer. Il y a de nombreux Li sur la page, et celui sur lequel vous cliquez sera mis en surbrillance. Lorsque j'utilisais jq à l'époque, c'était assez simple. J'ajoutais simplement l'élément sélectionné à addClass, puis je supprimais son élément frère, puis j'écrivais un style actif. Maintenant, pour utiliser React pour implémenter des opérations similaires, je pense à utiliser un currentIndex et à basculer en jugeant sur quel élément se trouve le currentIndex.

Premier aperçu du rendu :

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

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

Oui Pas très simple. Il s'agit d'ajouter un indicateur d'index à l'élément lors de la génération de ces li, puis lorsque vous cliquez dessus, d'utiliser event.currentTarget.getAttribute('index') pour supprimer l'index, puis définir la valeur de currentIndex, puis d'écrire css L'actif le style est fait.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour utiliser la méthode tableau JS

Explication détaillée des étapes pour utilisez la méthode de chaîne JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!