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


101

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.


Réponses:


160

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.


d'accord, je pense que cela fonctionnera. laissez-moi le tester. aussi, comment puis-je passer cette variable à un composant différent / non connecté?
Nom d'utilisateur

1
Cela devient en fait délicat, React ne le prévoit pas exactement. Dans l'architecture d'une application Web, cela entre dans la méthodologie de communication globale et globale choisie. De nombreuses personnes choisiraient une solution de type bus d'événements, dans laquelle un gestionnaire d'événements global publie et reçoit des événements dans des composants disparates. Ces messages d'événement contiendraient les données que vous souhaitez transmettre comme arguments. C'est ce que suggère Facebook dans sa documentation sur le sujet: facebook.github.io/react/tips/…
stolli

2
Une chose que je veux ajouter est que ce onMouseEnter onMouseLeavesont des événements DOM. Ils ne fonctionneront pas sur une coutume ReactComponent, vous devrez passer les événements comme accessoire et lier ces événements à un élément DOM ReactComponent, comme<div onMouseOver={ () => this.props.onMouseOver }>
DAMIEN JIANG

30

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


1

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.


0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.