Wie kann ich in Reaktion auf einen Schwebezustand zugreifen?

99

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.

Nutzername
quelle
Mögliches Duplikat einer Hover-Schaltfläche in react.js
BentOnCoding

Antworten:

156

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.

Stolli
quelle
Okay, ich denke das wird funktionieren. lass es mich testen. Wie kann ich diese Variable auch an eine andere / nicht verbundene Komponente übergeben?
Benutzername
1
Das wird tatsächlich schwierig, React sieht das nicht genau vor. In der Architektur einer Web-App wird dies in die gewählte globale, übergreifende Kommunikationsmethode einbezogen. Viele Leute würden sich für eine Event-Bus-Lösung entscheiden, bei der ein globaler Event-Manager Ereignisse in unterschiedlichen Komponenten veröffentlicht und empfängt. Diese Ereignismeldungen enthalten die Daten, die Sie als Argumente übergeben möchten. Dies ist, was Facebook in seinen Dokumenten zum Thema vorschlägt: facebook.github.io/react/tips/…
stolli
2
Eine Sache, die ich hinzufügen möchte, ist, dass onMouseEnter onMouseLeavees sich um DOM-Ereignisse handelt. Sie funktionieren nicht mit einem Brauch ReactComponent, Sie müssen die Ereignisse als Requisite weitergeben und diese Ereignisse an ein DOM-Element binden ReactComponent, wie<div onMouseOver={ () => this.props.onMouseOver }>
DAMIEN JIANG
30

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

BentOnCoding
quelle
0

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.

Rishav
quelle
0

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

Ruman
quelle