web-dev-qa-db-fra.com

Comment puis-je accéder à un état de survol dans reactjs?

J'ai un sidenav avec un groupe d'équipes de basket-ball. Je voudrais donc afficher quelque chose de différent pour chaque équipe lorsque l’une d’entre elles est survolée. De plus, j'utilise Reactjs, donc si je pouvais avoir une variable que je pourrais transmettre à un autre composant, ce serait génial.

hoverreactjs
80
Username

Les composants React exposent tous les événements de souris Javascript standard dans leur interface de niveau supérieur. Bien sûr, vous pouvez toujours utiliser :hover dans votre CSS, ce qui peut suffire à certains de vos besoins, mais pour les comportements plus avancés déclenchés par un survol, vous devrez utiliser le Javascript. Donc, pour gérer les interactions de survol, vous voudrez utiliser onMouseEnter et onMouseLeave. Vous les attachez ensuite aux gestionnaires de votre composant comme suit:

<ReactComponent
    onMouseEnter={this.someHandler}
    onMouseLeave={this.someOtherHandler}
/>

Vous utiliserez ensuite une combinaison d’états/accessoires pour transmettre l’état ou les propriétés modifiés à vos composants enfant React.

122
stolli

ReactJs définit les événements synthétiques suivants pour les événements de souris:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

Comme vous pouvez le constater, il n'y a pas d'événement de survol, car les navigateurs ne définissent pas un événement de survol de manière native.

Vous voudrez ajouter des gestionnaires pour onMouseEnter et onMouseLeave pour le comportement de survol.

Docs ReactJS - Evénements

22
BentOnCoding