React implémente la méthode de mise en évidence du li sélectionné en cliquant dessus

Cet article présente principalement l'exemple de code de réaction pour mettre en évidence le li sélectionné. Il y a beaucoup de li sur la page, et vous souhaitez mettre en évidence celui sur lequel vous cliquez. Le contenu est assez bon, j'aimerais le partager avec vous maintenant et le donner comme référence.

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.

D'abord le 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;
        }
     }

N'est-ce 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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à React Native à l'aide de la mise en page Flexbox

Méthode d'implémentation de SSR basée sur React et Redux

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!