J'essaie de changer la couleur de fond de l'onglet sélectionné. Le problème est que je dois ajouter une classe dynamique dans des données dynamiques.
J'essaie d'ajouter une classe CSS dans mon code, mais cette CSS sélectionnera mes onglets Tous les onglets Ce code sera sélectionné mes valeurs toutes les valeurs par DEFALUT
Je veux mettre en surbrillance un onglet sélectionné uniquement. Comment faire cela.
3 Réponses :
Vous pouvez utiliser activitéId code> pour vérifier l'onglet sélectionné. {
emailActivities.map((activity, i) => {
return (
<li
key={i}
className={this.state.activeTab === activity.activityId ? 'active' : null}
onClick={() => {
this.setState(
{ reportView: false, activeTab: activity.activityId },
this.getReportByActivityId(activity.activityId)
);
}}
>
{activity.activityTitle}
</li>
);
});
}
au lieu de paramétrer ReportView: false code>, vous avez besoin d'un état pour ActiveTabName code>.
actif code> comme ça, li>
OL> {emailActivities.map((activity, i) => {
return (
<li
key={i}
className={this.state.activeTabName=== activity.activityTitle? "active" : null}
onClick={() => {
this.setState({ activeTabName: activity.activityTitle}, this.getReportByActivityId(activity.activityId))
}}
>
{activity.activityTitle}
</li>
)
})
}
Si le nombre d'onglets est Vous pouvez sélectionner la première onglet à l'aide de la touche facilement, si le Nombre d'onglets est meilleur encore, utilisez ActivalId dans vos codes, il est facile de le faire. Dans ce cas, je pense que reporterview la valeur de l'état est inutile. composant styled-composant plutôt que de changer Changer de classement < / code>.
Pour plus de détails, veuillez vérifier.
réactive Tutoriel de composants de style
Documentation de composants de style
ReportView La valeur par défaut est vraie
Vous devez créer un nouveau composant de chaque élément
li . En faisant cela seulement, vous pouvez maintenir l'état de chaque ongletDonc, il n'y a pas d'option pour le faire avec une étiquette Li ???