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é.
Vous auriez besoin de faire quelque chose comme ça en termes de composants:
NavLinkList
|--NavLink
|--NavLink
NavLinkList
serait celui qui tient le activeLinkId
dans son état.
Cela activeLinkId
serait ensuite transmis à chacun Link
comme prop
si, quand il est modifié, les liens seraient de nouveau rendus.
En outre, NavLinkList
vous auriez la fonction qui changerait le gestionnaire activeLinkId
sur le Link
s onClick
.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots