réagit débutant ici.
J'ai un composant de bouton de réaction que je voudrais réutiliser sur mon application.
Ceci est mon composant de bouton réutilisable: P> en cliquant, il ajoutez un "actif" classe au composant.
Ce que je ne peux pas comprendre, c'est comment supprimer la classe du bouton "Actif" précédent une fois que je clique sur un bouton différent. P> <Button>Dog</Button>
<Button>Cat</Button>
<Button>Horse</Button>
3 Réponses :
Vous devez stocker l'index du bouton enfoncé dans le conteneur parent et la mettre à jour en fonction de la fonction. Vous pouvez essayer ce
Puis-je utiliser ceci sans le .map? Les boutons sont dans divers endroits, ils ne sont pas un tableau.
J'ai mal compris votre question, mais je pense que j'ai pu comprendre.
Vous pouvez vérifier l'exemple ici .
En général, vous devrez toujours garder les données à l'intérieur du composant parent et effectuer une validation à l'intérieur du composant enfant, les données doivent être accessibles à chaque bouton.
Juste une note, j'éviterais d'utiliser des index, c'est une mauvaise pratique.
J'ai réussi à résoudre moi-même et cela fonctionne comme prévu.
J'ai utilisé: useeffect, usecallback, useref.
https://codesandbox.io/s/buttons- FC6XQ? File = / src / index.js
Pour clarifier davantage: je veux garder la classe "active" uniquement sur le bouton que je clique sur le bouton.
Pensez à terme de bouton radio, vous devez créer un groupe de boutons