Wie kann ich in Reaktion auf einen Schwebezustand zugreifen?

Ich habe ein Sidenav mit ein paar Basketballmannschaften. Daher möchte ich für jedes Team etwas anderes anzeigen, wenn eines davon über ihm schwebt. Außerdem verwende ich Reactjs. Wenn ich also eine Variable haben könnte, die ich an eine andere Komponente übergeben könnte, wäre das großartig.

Reaktionskomponenten machen alle Standard-Javascript-Mausereignisse in ihrer obersten Benutzeroberfläche verfügbar. Natürlich können Sie es weiterhin :hoverin Ihrem CSS verwenden, und das mag für einige Ihrer Anforderungen angemessen sein, aber für die fortgeschritteneren Verhaltensweisen, die durch einen Schwebeflug ausgelöst werden, müssen Sie Javascript verwenden. Um Hover-Interaktionen zu verwalten, sollten Sie onMouseEnterund verwenden onMouseLeave. Sie hängen sie dann wie folgt an Handler in Ihrer Komponente an:

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

Anschließend verwenden Sie eine Kombination aus Status / Requisiten, um geänderte Status oder Eigenschaften an Ihre untergeordneten React-Komponenten weiterzugeben.

ReactJs definiert die folgenden synthetischen Ereignisse für Mausereignisse:

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

Wie Sie sehen, gibt es kein Hover-Ereignis, da Browser ein Hover-Ereignis nicht nativ definieren.

Sie möchten Handler für onMouseEnter und onMouseLeave für das Schwebeverhalten hinzufügen.

ReactJS Docs - Ereignisse

Ich weiß , dass die akzeptierte Antwort ist groß, aber für alle , die für ein Schweben wie Gefühl sucht Sie verwenden können , setTimeoutauf mouseoverund speichern Sie den Griff in einer Karte (von sagen wir mal Liste IDs SetTimeout Handle). Auf mouseoverlöschen den Griff von setTimeout und löschen Sie sie von der Karte

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

Und implementieren Sie die Karte wie folgt:

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

Und die Karte ist so,

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

Ich bevorzuge onMouseOverund onMouseOutweil es auch für alle Kinder in der gilt HTMLElement. Ist dies nicht erforderlich ist , können Sie verwenden , onMouseEnterund onMouseLeavejeweils.

Um einen Hover-Effekt zu erzielen, können Sie einfach diesen Code ausprobieren

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

Wenn Sie diese Situation mit dem useState () - Hook lösen möchten, können Sie diesen Code ausprobieren

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 oben genannten Codes funktionieren für den Hover-Effekt, aber das erste Verfahren ist einfacher zu schreiben und zu verstehen