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

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

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 :hoverdans votre CSS, et cela peut être adéquat pour 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 onMouseEnteret onMouseLeave. Vous les attachez ensuite aux gestionnaires de votre composant comme ceci:

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

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

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 voir, il n'y a pas d'événement de survol, car les navigateurs ne définissent pas d'événement de survol de manière native.

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

ReactJS Docs - Événements

Je sais que la réponse acceptée est grande , mais pour tous ceux qui cherchent un vol stationnaire comme l' impression que vous pouvez utiliser setTimeoutsur mouseoveret enregistrez la poignée dans une carte (de liste disons LET les ids à setTimeout poignée). Sur mouseovereffacez la poignée de setTimeout et supprimez-la de la carte

onMouseOver={() => this.onMouseOver(someId)}
onMouseOut={() => this.onMouseOut(someId)

Et implémentez la carte comme suit:

onMouseOver(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = setTimeout(() => {
    scrollPreviewToComponentId(listId);
  }, 1000); // Replace 1000ms with any time you feel is good enough for your hover action
  this.hoverHandleMap[listId] = handle;
}

onMouseOut(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = this.hoverHandleMap[listId];
  clearTimeout(handle);
  delete this.hoverHandleMap[listId];
}

Et la carte est comme ça,

hoverHandleMap: { [listId: string]: NodeJS.Timeout } = {};

Je préfère onMouseOveret onMouseOutparce que cela s'applique également à tous les enfants du HTMLElement. Si cela n'est pas nécessaire, vous pouvez utiliser onMouseEnteret onMouseLeaverespectivement.

Pour avoir un effet de survol, vous pouvez simplement essayer ce code

import React from "react";
  import "./styles.css";

    export default function App() {

      function MouseOver(event) {
        event.target.style.background = 'red';
      }
      function MouseOut(event){
        event.target.style.background="";
      }
      return (
        <div className="App">
          <button onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</button>
        </div>
      );
    }

Ou si vous voulez gérer cette situation en utilisant le hook useState (), vous pouvez essayer ce morceau de code

import React from "react";
import "./styles.css";


export default function App() {
   let [over,setOver]=React.useState(false);

   let buttonstyle={
    backgroundColor:''
  }

  if(over){
    buttonstyle.backgroundColor="green";
  }
  else{
    buttonstyle.backgroundColor='';
  }

  return (
    <div className="App">
      <button style={buttonstyle}
      onMouseOver={()=>setOver(true)} 
      onMouseOut={()=>setOver(false)}
      >Hover over me!</button>
    </div>
  );
}

Les deux codes ci-dessus fonctionneront pour l'effet de survol, mais la première procédure est plus facile à écrire et à comprendre