Explication détaillée des étapes pour mettre en évidence les li sélectionnés dans la mise en œuvre de React

Cette fois, je vais vous donner une explication détaillée des étapes pour mettre en évidence li dans l'implémentation de React. Quelles sont les précautions pour sélectionner la mise en évidence de Li dans l'implémentation de React. Voici des cas pratiques, jetons un coup d'œil.

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

{itemList}

    } }

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.

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 combiner React avec TypeScript et Mobx

Explication détaillée des étapes pour utiliser React -routeur v4

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!