Hoe krijg ik toegang tot een zweefstatus in reactjs?

Ik heb een sidenav met een stel basketbalteams. Dus ik zou voor elk team iets anders willen laten zien wanneer er een van hen wordt aangehangen. Ik gebruik ook Reactjs, dus als ik een variabele zou kunnen hebben die ik zou kunnen doorgeven aan een ander onderdeel, zou dat geweldig zijn.

Antwoord 1, autoriteit 100%

React-componenten tonen alle standaard Javascript-muisgebeurtenissen in hun interface op het hoogste niveau. Natuurlijk kun je nog steeds :hovergebruiken in je CSS, en dat kan voor sommige van je behoeften voldoende zijn, maar voor het meer geavanceerde gedrag dat wordt geactiveerd door een hover, moet je Javascript gebruiken. Dus om hover-interacties te beheren, moet je onMouseEnteren onMouseLeavegebruiken. U koppelt ze dan als volgt aan handlers in uw component:

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

Je gebruikt dan een combinatie van staat/rekwisieten om gewijzigde staat of eigenschappen door te geven aan je onderliggende React-componenten.

Antwoord 2, autoriteit 18%

ReactJs definieert de volgende synthetische gebeurtenissen voor muisgebeurtenissen:

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

Zoals je kunt zien, is er geen hover-gebeurtenis, omdat browsers geen native hover-gebeurtenis definiëren.

U wilt handlers toevoegen voor onMouseEnter en onMouseLeave voor zweefgedrag.

ReactJS Docs – Evenementen

Antwoord 3

Voor een hover-effect kun je deze code gewoon proberen

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>
      );
    }

Of als je deze situatie wilt aanpakken met useState() hook, dan kun je dit stukje code proberen

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>
  );
}

Beide bovenstaande code werkt voor het zweefeffect, maar de eerste procedure is gemakkelijker te schrijven en te begrijpen

Antwoord 4

Ik weet dat het geaccepteerde antwoord geweldig is, maar voor iedereen die op zoek is naar een hover-achtig gevoel, kun je setTimeoutgebruiken op mouseoveren de handle opslaan op een kaart (van laten we zeggen lijst-ID’s om Timeout-handle in te stellen). Wis op mouseoverhet handvat van setTimeout en verwijder het van de kaart

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

En implementeer de kaart als volgt:

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];
}

En de kaart is zo,

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

Ik geef de voorkeur aan onMouseOveren onMouseOutomdat dit ook van toepassing is op alle kinderen in het HTMLElement. Als dit niet vereist is, kunt u respectievelijk onMouseEnteren onMouseLeavegebruiken.

Antwoord 5

Dit werkt niet voor OP omdat ze een variabele wilden, maar voor degenen die alleen een UI-zweefeffect willen, is het meestal gemakkelijker om bij CSS te blijven.

Het onderstaande voorbeeld laat een verwijderknop zien wanneer de muisaanwijzer op een item wordt geplaatst:

<div className="revealer">
  <div>
    {itemName}
  </div>
  <div className="hidden">
    <Btn label="Delete"/>
  </div>
</div>
.hidden {
  display: none;
}
.revealer:hover .hidden {
  display: block;
}

Ouder-div heeft de klasse revealer. Als de muisaanwijzer erop staat, wordt de hiddendiv zichtbaar. Verborgen div moet worden genest in onthullende div.