Réagir: ajouter une classe active au lien de navigation sélectionné en cliquant sur

T. Gaud

J'essaye d'ajouter une classe «active» à un lien de navigation quand on clique dessus.

dans JQuery, je pourrais faire quelque chose comme:

$('.navlink').on('click', function() {
    $("a").removeClass('active');
    $(this).toggleClass('active');
});

Voici le placard que j'ai réussi à obtenir dans React:

export class NavLink extends Component {
constructor(props) {
    super(props);
    this.toggleClass=this.toggleClass.bind(this);
    this.state = {
      isActive: 1,
    }
  }

toggleClass = () => {
    this.setState({ isActive: this.props.id });
  }


render() {
    const { href, name, id } = this.props;
    const classNames = this.state.isActive === id ? "nav-link active" : "nav-link";

    return (
        <a 
        className={classNames} 
        onClick={this.toggleClass.bind(this)} href={href}>{name}</a>
      )
  }
}

Le problème est que React ne restitue que le lien cliqué. Ainsi, une fois qu'un lien a reçu une classe d'actif, il ne sera pas supprimé si un autre lien est cliqué.

Akrion

Vous auriez besoin de faire quelque chose comme ça en termes de composants:

NavLinkList
|--NavLink
|--NavLink

NavLinkListserait celui qui tient le activeLinkIddans son état.

Cela activeLinkIdserait ensuite transmis à chacun Linkcomme propsi, quand il est modifié, les liens seraient de nouveau rendus.

En outre, NavLinkListvous auriez la fonction qui changerait le gestionnaire activeLinkIdsur le Links onClick.

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

Ajouter une classe active au bouton d'onglet sur l'option de menu sélectionnée

Réagir ajouter une image en cliquant sur?

Ajouter une animation de classe en cliquant sur jquery

Réduire la navigation réactive en cliquant sur le lien

Ajouter une classe active au lien personnalisé au chargement

React ajouter une classe active sur l'onglet sélectionné

Comment ajouter/supprimer une classe active en cliquant sur la vignette ?

Comment ajouter une classe active au lien qui a un fragment en angulaire?

Comment télécharger une image en cliquant sur un lien au lieu de l'ouvrir

Comment lancer une fonction en cliquant sur un lien, puis passer une classe à partir de ce lien

Problèmes liés à la suppression d'un menu de navigation en cliquant sur un lien

Ajouter une classe de navigation active basée sur une URL pour une URL similaire

Comment fermer une barre de navigation ouverte réduite en cliquant en dehors de l'élément de barre de navigation ou en cliquant sur un lien dans Bootstrap 4?

Ajouter / supprimer une classe en cliquant sur le bouton

Comment ajouter une barre de navigation par programmation en cliquant sur le bouton

Ajouter une classe de lien de navigation actif dans Pug

Réagir : ajouter/modifier la base de saisie de texte sur une option sélectionnée

Changement de classe active en cliquant sur une nouvelle page sans rafraîchir

Bootstrap 3: Comment créer un lien vers une autre barre de navigation en cliquant sur un lien hypertexte dans le contenu actuel de la barre de navigation ?

Ajouter une classe Div à la classe Hyperlien, puis cloner et ajouter un lien hypertexte au conteneur en cas de clic

Ajout d'une classe au lien de navigation principale sur une sous-page basée sur l'URL

Comment changer la classe active en cliquant sur un autre lien?

Ajouter le paramètre Query-String au lien statique en cliquant sur

Comment ajouter une nouvelle ligne dans le message de confirmation JS à afficher en cliquant sur un lien ?

Ajouter une classe simple au lien de div basculé

Changer la classe de lien de menu en active sur un site Web d'une page

Ajouter une classe de navigation active basée sur l'URL

Comment basculer la classe active avec les liens de la barre de navigation en cliquant sur javascript

Comment réparer le bouton Ajouter au panier en cliquant sur Ajouter un article au panier sans redirection de page

TOP liste

  1. 1

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  2. 2

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  3. 3

    Microsoft.WebApplication.targets

  4. 4

    knn classification 10 plis de l'outil et du tri

  5. 5

    Quelle est la relation entre le modèle et le tableau ? C'est compliqué

  6. 6

    Créer un système Buzzer à l'aide de python

  7. 7

    Fonction de puissance en Java

  8. 8

    opérations en virgule flottante dans go

  9. 9

    Comment définir la couleur de l'intersection dans un diagramme de Venn?

  10. 10

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  11. 11

    comment supprimer "compte de connexion google" à des fins de développement - actions sur google

  12. 12

    AutoMapper.Collection.EFCore - Erreur générée lors de la configuration

  13. 13

    Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django

  14. 14

    Comment remplir les valeurs manquantes avec plusieurs colonnes dans R

  15. 15

    Comment puis-je ajouter un UIView sous mon contrôleur de barre d'onglets par programme?

  16. 16

    Yat-il un référentiel maven application Java à démarrer rapidement 11

  17. 17

    Comment rechercher des éléments dans une ArrayList? - Java

  18. 18

    Comment utiliser HttpClient avec TOUT cert ssl, quelle que soit la « mauvaise » est

  19. 19

    Comment créer un bot à compte à rebours dans Discord en utilisant Python

  20. 20

    Sélectionnez le bouton radio sur la saisie de texte

  21. 21

    Placez le modeBar en haut au centre à l'aide de plotly.js

chaudétiquette

Archive