Einrichten eine onClick-Ereignishandler für eine Link-Komponente

1. Link-Komponente in React
2. Behandeln Sie das onClick-Ereignis für die Link-Komponente in React

Das Einrichten von Event-Handlern ist ein wichtiger Teil beim Erstellen einer React-Anwendung.

onClick ist eines der häufigsten Ereignisse, das normalerweise auf <button>- und <span>-Elementen definiert wird. In diesem Artikel werden wir die Einrichtung eines Ereignishandlers für die Komponente Link durchgehen.

Link-Komponente in React

React Router ist die Hauptbibliothek zum Konfigurieren der Navigation in React.

Es bietet Ihnen alle Bausteine, die zum Aufbau eines Navigationssystems erforderlich sind. Link ist eine der wichtigsten Komponenten, die React Router zur Verfügung stellt.

Diese Komponente ist eine viel fortschrittlichere Alternative zum <a>-Tag in HTML. Benutzer verwenden häufig Link-Komponenten, um Navigationsmenüs oder einmalige Links zu Seiten innerhalb der App zu erstellen.

Die Komponente akzeptiert viele Requisiten, aber das to ist wahrscheinlich das wichtigste. Mit diesem Prop können wir den Pfad relativ zur Homepage angeben, wohin die Link-Komponente navigieren soll.

Schauen wir uns ein Beispiel an:

<Link to="/contact">Contact Us</Link>

Angenommen, unsere Homepage ist www.homepage.com, würde uns ein Klick auf diesen Link zu www.homepage.com/contact führen. Wenn das Click-Ereignis eintritt, ist das Standardverhalten der Link-Komponente, zum angegebenen Pfad zu navigieren.

Was ist jedoch, wenn wir neben dem Standardverhalten eine andere Operation ausführen möchten?

onClick-Attribut

Die Link-Komponente akzeptiert auch ein onClick-Attribut, das gleich einer Handler-Funktion (oder einer Referenz darauf) in geschweiften Klammern gesetzt werden sollte. Schauen wir uns ein einfaches Beispiel an:

import "./styles.css";
import { Link, BrowserRouter } from "react-router-dom"
export default function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Link to="/page" onClick={() => alert("boo")}>Clickable Link</Link>
    </div>
    </BrowserRouter>
  ); 
}

In diesem einfachen Beispiel haben wir eine Link-Komponente.

Gemäß dem Standardverhalten führt uns ein Klick darauf zur Route /page. Da wir jedoch das Attribut onClick angegeben haben, fungiert es auch als Event-Handler.

In diesem Fall wird es einen einfachen Text warnen. Sie können einen Blick auf codesandbox werfen, um es selbst auszuprobieren.

Beachten Sie, dass geschweifte Klammern erforderlich sind, um sicherzustellen, dass der Ausdruck dazwischen als gültiges JavaScript behandelt wird.

Behandeln Sie das onClick-Ereignis für die Link-Komponente in React

Sofern Sie sich nicht zu 100% sicher sind, dass Ihre Link-Komponente einen onClick-Event-Handler benötigt, ist es besser, auf andere Weise zu arbeiten.

Das Einrichten eines separaten Event-Handlers verzögert die Navigation und macht den Zweck der Verwendung von Link-Komponenten überhaupt erst zunichte. Die Navigation wird verzögert, da die Komponente zuerst den Ereignishandler ausführt und anschließend den Pfad navigiert.

Dennoch müssen Sie manchmal eine bestimmte Operation ausführen, wenn der Benutzer eine bestimmte Seite Ihrer App erreicht. Sie können dies tun, indem Sie stattdessen die Lebenszyklusmethode componentDidMount() (oder den Hook useEffect()) der neuen Komponente ändern.

Auf diese Weise können Sie immer noch eine Funktion ausführen, wenn der Benutzer eine Seite erreicht. Und es wird keine Verzögerungen bei der Navigation geben.

Wenn Sie sich den Beispiellink selbst ansehen, werden Sie die Verzögerung bemerken.