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.
99
Antworten:
Reaktionskomponenten machen alle Standard-Javascript-Mausereignisse in ihrer obersten Benutzeroberfläche verfügbar. Natürlich können Sie es weiterhin
:hover
in 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 SieonMouseEnter
und verwendenonMouseLeave
. Sie hängen sie dann wie folgt an Handler in Ihrer Komponente an:Anschließend verwenden Sie eine Kombination aus Status / Requisiten, um geänderte Status oder Eigenschaften an Ihre untergeordneten React-Komponenten weiterzugeben.
quelle
onMouseEnter
onMouseLeave
es sich um DOM-Ereignisse handelt. Sie funktionieren nicht mit einem BrauchReactComponent
, Sie müssen die Ereignisse als Requisite weitergeben und diese Ereignisse an ein DOM-Element bindenReactComponent
, wie<div onMouseOver={ () => this.props.onMouseOver }>
ReactJs definiert die folgenden synthetischen Ereignisse für Mausereignisse:
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
quelle
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 ,
setTimeout
aufmouseover
und speichern Sie den Griff in einer Karte (von sagen wir mal Liste IDs SetTimeout Handle). Aufmouseover
löschen den Griff von setTimeout und löschen Sie sie von der KarteUnd implementieren Sie die Karte wie folgt:
Und die Karte ist so,
Ich bevorzuge
onMouseOver
undonMouseOut
weil es auch für alle Kinder in der giltHTMLElement
. Ist dies nicht erforderlich ist , können Sie verwenden ,onMouseEnter
undonMouseLeave
jeweils.quelle
Um einen Hover-Effekt zu erzielen, können Sie einfach diesen Code ausprobieren
Wenn Sie diese Situation mit dem useState () - Hook lösen möchten, können Sie diesen Code ausprobieren
Beide oben genannten Codes funktionieren für den Hover-Effekt, aber das erste Verfahren ist einfacher zu schreiben und zu verstehen
quelle