logo

Erstellen von Hover-Events mit SyntheticEvent und React Hover

Geschrieben von Habdul Hazeez ✏️

Einführung

Sie können ein einfaches Hover-Ereignis in React erreichen, indem Sie das native CSS :hover verwenden Selektor, aber es gibt zwei Einschränkungen, auf die Sie stoßen können:

  1. Sie können keine Änderungen vornehmen oder den eigentlichen :hover verändern Selektor durch JavaScript
  2. Sie können es nicht verwenden, um andere Komponenten beim Hover anzuzeigen

Dieser Artikel erklärt zwei alternative Möglichkeiten, wie Sie diese Einschränkungen in React überwinden können. Die erste verwendet zwei Event-Handler, die von React SyntheticEvent unterstützt werden , und die zweite verwendet eine npm-Bibliothek namens React Hover. Letzteres ermöglicht es Ihnen, andere Komponenten beim Hover anzuzeigen.

Ein schneller Überblick über Ereignisse in React

React verarbeitet Ereignisse, die Sie normalerweise in Vanilla-JavaScript schreiben würden, jedoch mit einigen wesentlichen Unterschieden:

  • Die Event-Handler werden nach der Camel-Case-Konvention benannt. Beispiel:onclick wird zu onClick
  • Sie können false nicht zurückgeben um ein Standardverhalten wie in JavaScript zu verhindern; stattdessen müssen Sie explizit preventDefault aufrufen
  • Ihre Event-Handler erhalten Instanzen von SyntheticEvent

Was ist SyntheticEvent ?

SyntheticEvent ist der browserübergreifende Wrapper von React, der das native Ereignis des Browsers umschließt, sodass Ihre Ereignisse in allen Browsern identisch funktionieren.

Unterstützte Ereignisse

React unterstützt ein Array von SyntheticEvent Typen, aber in diesem Artikel liegt unser Hauptaugenmerk auf Mausereignissen.

Die verfügbaren Mausereignisse sind im nächsten Codeblock aufgelistet. Beim Durchlesen werden Sie feststellen, dass es kein onHover gibt , wodurch Sie ein Hover-Ereignis erstellen können. 

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

Darüber möchten wir hier sprechen – und glücklicherweise gibt es eine Problemumgehung.

Schauen wir uns das im nächsten Abschnitt an.

So erstellen Sie Hover-Ereignisse mit SyntheticEvent

In diesem Abschnitt zeige ich, wie man ein Hover-Ereignis mit zwei Event-Handlern erstellt, die von Reacts SyntheticEvent unterstützt werden . Sie sind onMouseEnter und onMouseLeave .

Für diese Demonstration erstellen Sie einen Tooltip, bei dem es sich um ein UI-Element handelt, dessen Inhalt angezeigt wird, wenn ein Benutzer mit der Maus über ein Webseitenelement fährt.

Erstellen eines Reaktions-Tooltips

Zunächst müssen Sie ein React-Projekt einrichten, falls Sie noch keines haben. Sie können entweder ein React-Projekt auf CodeSandbox erstellen oder ein lokales Projekt mit Create React App einrichten.

Für diesen Artikel werde ich mich für die letztere Option entscheiden. 

npm install create-react-app

Gehen Sie nach Abschluss der Installation wie folgt vor:

  1. Löschen Sie den Inhalt von App.js und index.css
  2. Erstellen Sie zwei Ordner innerhalb des src Ordner und nennen Sie sie css und component
  3. Innerhalb des css erstellen Sie eine neue Datei mit dem Namen Tooltip.css
  4. Suchen Sie den component erstellen Sie eine neue Datei mit dem Namen Tooltip.js

Jetzt in Tooltip.js , schreiben wir etwas Code. Wir schreiben den Code für Tooltip.css später im Artikel.

Da React Ihnen erlaubt, komponentenbasierten Code zu schreiben, wäre der Code für die Haupt-Tooltip-Funktionalität tatsächlich eine Komponente.

Der nächste Codeblock importiert React , useState ab React , und der css Datei, die wir zuvor erstellt haben. Sie benötigen useState um den Anwendungsstatus zu verwalten, wenn der Benutzer die QuickInfo anzeigt. 

// src/components/Tooltip.js
​
import React, { useState } from 'react'
import '../css/Tooltip.css'

Wenn Sie diese import-Anweisungen aus dem Weg geräumt haben, können Sie mit dem Schreiben des Codes beginnen, der die Kernfunktionalität der QuickInfo implementiert. Diese Kernfunktionalität würde sich in einer Komponente namens Tooltip befinden , das ist eine Funktion, die Daten zurückgibt.

In diesem Fall ist es eine Pfeilfunktion. 

// src/components/Tooltip.js
import React, { useState } from 'react'
import '../css/Tooltip.css'
​
const Tooltip = (props) => {
   // All the code that will make the
   // tooltip work resides here
}

Innerhalb des Tooltip Komponente, gehen Sie wie folgt vor:

  1. Richten Sie einen Timer ein, um das Zeitintervall zwischen dem Anzeigen und dem Ausblenden des Tooltips zu bestimmen
  2. Zustand mit useState einrichten
  3. Schreiben Sie eine Funktion, um den Tooltip anzuzeigen
  4. Schreiben Sie eine Funktion, um den Tooltip auszublenden
  5. Gibt JSX zurück, das ein einzelnes übergeordnetes HTML-Element und seine untergeordneten Elemente enthält. Dieses übergeordnete HTML-Element hätte den onMouseEnter und onMouseLeave daran angehängte Event-Handler
  6. Schreiben Sie das Argument für onMouseEnter , das ist die Funktion, die den Tooltip anzeigt
  7. Schreiben Sie das Argument von onMouseLeave , das ist die Funktion, die den Tooltip ausblendet
  8. Definieren Sie das Element children; Das heißt, der Tooltip-Inhalt hätte einen Klassennamen und ein Attribut, die über CSS gestaltet würden

Alle diese Schritte werden im nächsten Codeblock behandelt. 

// src/components/Tooltip.js
// Code truncated, check the previous
// code block.
const Tooltip = (props) => {
   // All the code that will make the
   // tooltip work resides here

   // Set up timer and state
   let TooltipTimeout;
   const [activeToolTip, setActiveToolTip] = useState(false);

   // Write a function to show the tooltip
   const showToolTip = () => {
       TooltipTimeout = setTimeout(() => {
           setActiveToolTip(true);
      }, props.delay || 300);
  };

   // Write a function to hide the tooltip
   const hideToolTip = () => {
       setActiveToolTip(false);
       clearInterval(TooltipTimeout);
  };

   // Return JSX which contains the HTML
   // data for the tooltip

   // Note the usage of the 2 supported event handlers
   // mentioned earlier in this article. They make
   // it is possible to create the hover event in React.
   return (
       <div
           className="Tooltip-Container"
           onMouseEnter={showToolTip}
           onMouseLeave={hideToolTip}
       >

          {props.children}
​
          {activeToolTip && (
               <div className={`Tooltip-Content ${props.direction} || "top"}`}>
                   {props.content}
               </div>
           )}

       </div>
   );
};
​
// Export the tooltip
export default Tooltip

Der Tooltip ist jetzt einsatzbereit, aber bevor wir ihn bereitstellen können, müssen wir ihn in App.js importieren (oder jede andere Komponente, wo Sie es nützlich finden würden).

Der nächste Codeblock macht es möglich:

// App.js
​
import React from "react"
import Tooltip from './components/Tooltip';
import './index.css';
​
const App = () => {
return (
  <div className="App">
    <div className="tooltip-wrapper">
      <Tooltip content="I am a tooltip" direction="top">
        Hover your mouse here
      </Tooltip>
    </div>
  </div>
)
}
​
export default App

Und jetzt können wir mit dem Styling fortfahren.

Gestaltung unseres React-Tooltip

Wechseln Sie zu Tooltip.css Datei und schreibe folgendes:

/* css/Tooltip.css */
​
/**
* The CSS class name starts with a
* capital letter to indicate it's a
* component.
*/
.Tooltip-Container {
   position: relative;
   display: inline-block;
}
​
.Tooltip-Content {
   position: absolute;
   left: 50%;
   padding: 8px;
   color: #ffffff;
   background: #1a1a1a;
   font-size: 0.85em;
   border-radius: 6px;
   transform: translateX(-50%);
   z-index: 1;
   white-space: nowrap;
}
​
.Tooltip-Content::before {
   left: 50%;
   position: absolute;
   content: " ";
   border: 6px solid transparent;
   margin-left: -6px;
}
​
.Tooltip-Content.top {
   top: -30px;
}
​
.Tooltip-Content.top::before {
   top: 100%;
   border-top-color: #1a1a1a;
}
​
/**
* The following styles are
* variations of the tooltip when you
* change the value if the "direction" attribute
* in the App component.
*/
.Tooltip-Content.right {
   top: 50%;
   left: calc(100% + 20px);
   transform: translateY(-50%);
}
​
.Tooltip-Content.right::before {
   top: 50%;
   left: -6px;
   transform: translateY(-50%);
   border-right-color: #1a1a1a;
}
​
.Tooltip-Content.bottom::before {
   bottom: 100%;
   border-bottom-color: #1a1a1a;
}
​
.Tooltip-Content.left {
   top: 50%;
   right: calc(100% + 30px);
   left: auto;
   transform: translateY(-50%);
}
​
.Tooltip-Content.left::before {
   top: 50%;
   right: -12px;
   left: auto;
   transform: translateY(-50%);
   border-left-color: #1a1a1a;
}

Wechseln Sie danach zu index.css , die noch leer sein sollte, und schreibe folgendes:

/* index.css */
.App {
    font-family: "Trebuchet MS", Verdana, Geneva, Tahoma, sans-serif;
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 120px;
    padding-left: 16px;
}
​
.tooltip-wrapper {
    padding: 16px 120px;
}

Wenn Sie jetzt mit der Maus über den Text „Bewegen Sie Ihre Maus hierher“ fahren, wird der Tooltip angezeigt. Wenn Sie die Maus vom Text wegbewegen, verschwindet der Tooltip.

Groß! Das hast du nicht nur erreicht, obwohl React keinen Standard-onHover hat -Methode, aber Sie haben auch zwei Event-Handler genutzt, die von Reacts SyntheticEvent unterstützt werden (onMouseEnter und onMouseLeave ), um es zu erstellen.

Im nächsten Abschnitt erkläre ich, wie man etwas Ähnliches mit einer npm-Bibliothek namens React Hover macht.

Erstellen Sie Hover-Ereignisse mit React Hover

Wie auf der offiziellen npm-Seite angegeben, „ermöglicht Ihnen React Hover, alles in ein ‚schwebbares‘ Objekt zu verwandeln.“ Dieses "Irgendwas" könnte einfaches altes HTML oder eine andere Komponente in Ihrer Anwendung sein.

Bevor wir uns mit der Syntax von React Hover und seiner Funktionsweise befassen, lassen Sie uns es installieren. 

npm install --save react-hover

Der obige Befehl installiert React Hover in Ihrem aktuellen Projektverzeichnis. Sie können die erfolgreiche Installation überprüfen, indem Sie Ihren package.json überprüfen Datei.

Nun zur Syntax.

Die React Hover-Syntax

React Hover bietet die folgenden Optionen zum Erstellen eines "schwebefähigen" Objekts:

  • <ReactHover> :Sie werden dies um zwei Dinge wickeln, nämlich <Trigger> und <Hover> Komponenten
  • <Trigger> :Dies ist der Wrapper für <Trigger> Komponente
  • <Hover> :Dies ist der Wrapper für <Hover> Komponente
  • options :Dies ist ein Attribut von <ReactHover> , und sein Wert ist ein Objekt, das das Verhalten und die Position des <Hover> bestimmt Komponente, wenn Sie den Mauszeiger über <Trigger> bewegen Komponente. Das Objekt akzeptiert die nächsten drei Eigenschaften:
    • followCursor :Akzeptiert einen booleschen Wert, der bestimmt, ob der <Hover> Die Komponente folgt dem Cursor, wenn Sie den Cursor über <Trigger> bewegen Komponente
    • shiftX :Bestimmt die Position des <Hover> Komponente entlang der X-Achse, also links oder rechts
    • shiftY :Dies bestimmt die Position des <Hover> Komponente entlang der Y-Achse, also oben oder unten
  • type :Dieses Attribut identifiziert die Komponente als Trigger oder Hover; daher wäre sein Wert <Trigger> für die Auslöserkomponente und <Hover> für die Hover-Komponente

Randnotiz:Wenn Sie statt einer Komponente lieber reines HTML mit React Hover verwenden möchten, schreiben Sie den HTML-Code direkt in <Trigger> und <Hover> bzw..

React Hover implementieren

Okay, genug Theorie – es ist Zeit für etwas Code!

Erstellen Sie zwei Dateien in Ihrem Komponentenordner, nämlich TriggerComponent.js und HoverComponent.js . Wechseln Sie zu Ihrem Editor und geben Sie den nächsten Codeblock in TriggerComponent.js ein :

// components/TriggerComponent.js
​
import React from 'react'
​
const TriggerComponent = () => {
   return (
       <p>Hover on me</p>
  )
}
​
export default TriggerComponent

Wechseln Sie als Nächstes zu HoverComponent.js und tippe folgendes ein:

// components/HoverComponent.js
​
import React from 'react'
​
const HoverComponent = () => {
   return (
       <p>I am a hover component.</p>
  )
}

export default HoverComponent</pre>

Wenn diese Dateien alle eingerichtet sind, können Sie sie in App.js verwenden oder an einem anderen Ort in Ihrer App. Wohlgemerkt in App.js schreiben Sie das Objekt, das Sie an options übergeben Attribut. Wie bereits erwähnt, bestimmt dieses Objekt das Verhalten der schwebenden Komponente, wenn der Cursor über <Trigger> bewegt wird Komponente.

Davon abgesehen fahren wir im nächsten Codeblock mit App.js fort :

// App.js
​
import React from 'react'
import ReactHover, { Trigger, Hover } from 'react-hover'
import TriggerComponent from './components/TriggerComponent'
import HoverComponent from './components/HoverComponent'
​
// Set the option that determines the position
// and behavior of the hover component
const OptionsCursorTrueWithMargins = {
   followCursor: true,
   shiftX: 20,
   shiftY: 0
}
​
// The App function
const App = () => {
   return (
       <ReactHover options={OptionsCursorTrueWithMargins}>
           <Trigger type="trigger">
               <TriggerComponent />
           </Trigger>

           <Hover type="hover">
               <HoverComponent />
           </Hover>
       </ReactHover>
  )
};
​
export default App

Speichern Sie Ihre Dateien, fügen Sie ein Design hinzu, das Ihren Anforderungen entspricht, und testen Sie es dann in Ihrem Webbrowser. Sie sollten etwas Ähnliches wie das GIF unten haben.

Fazit

Dieser Artikel behandelt zwei gute Optionen, die Sie in Ihrem Arsenal zur Verfügung haben sollten, wenn Sie beabsichtigen, Hover-Ereignisse in React zu erstellen. Die erste Option nutzt zwei Event-Handler, die von Reacts SyntheticEvent unterstützt werden , und die zweite Option enthält React Hover, eine JavaScript-Bibliothek, die in der npm-Registrierung verfügbar ist.

Vollständiger Einblick in Produktions-React-Apps

Das Debuggen von React-Anwendungen kann schwierig sein, insbesondere wenn Benutzer auf Probleme stoßen, die schwer zu reproduzieren sind. Wenn Sie daran interessiert sind, den Redux-Status zu überwachen und zu verfolgen, automatisch JavaScript-Fehler aufzudecken und langsame Netzwerkanfragen und die Ladezeit von Komponenten zu verfolgen, versuchen Sie es mit LogRocket.


LogRocket ist wie ein DVR für Web-Apps und zeichnet buchstäblich alles auf, was in Ihrer React-App passiert. Anstatt zu raten, warum Probleme auftreten, können Sie aggregieren und darüber berichten, in welchem ​​Zustand sich Ihre Anwendung befand, als ein Problem auftrat. LogRocket überwacht auch die Leistung Ihrer App und erstellt Berichte mit Metriken wie Client-CPU-Auslastung, Client-Speichernutzung und mehr.

Das LogRocket Redux-Middleware-Paket fügt Ihren Benutzersitzungen eine zusätzliche Transparenzebene hinzu. LogRocket protokolliert alle Aktionen und Zustände aus Ihren Redux-Speichern.

Modernisieren Sie das Debugging Ihrer React-Apps – beginnen Sie kostenlos mit der Überwachung.