Href onClick-Ereignis in React

Um einen Klick auf einem React-Link zu behandeln, übergibst du eine Funktion an dessen onClick-Prop. Gib einem HTML-Element <a> ein aussagekräftiges href, wenn es navigieren soll; nach dem Handler wird die normale Navigation fortgesetzt, sofern der Handler nicht event.preventDefault() aufruft.

Eine onClick-Aktion für einen Link (<a></a>) in React festlegen

Definiere einen Handler und übergib dem Anker dessen Referenz als onClick={handleClick}. Dieses eigenständige JavaScript-Beispiel zeigt einen Handler, der eine Nachricht ausgibt. In einer React-Komponente verwendest du dieselbe Funktion als Wert für onClick des Ankers.

function handleClick() {
  console.log("You clicked the link!");
}

handleClick();

Die Nachricht des Beispiels erscheint in der Browserkonsole, wenn der Handler ausgeführt wird. Schreibe den Anker in der Komponente so: <a href="/account" onClick={handleClick}>Open account</a>. Das href gibt das Ziel an, und React ruft den Handler beim Klick auf. Schreibe nicht onClick={handleClick()}: Dadurch wird die Funktion bereits beim Rendern aufgerufen, statt ihre Referenz für den Klick zu übergeben.

Standardmäßig folgt der Browser nach dem Handler dem href des Ankers. Soll der Klick eine Aktion ausführen, ohne zu navigieren, nimm das Event entgegen und rufe im Handler event.preventDefault() auf. Dadurch wird die Navigation dieses Ankers verhindert, aber nicht jede Standardaktion des Browsers. Für eine Aktion, die keine Navigation ist, eignet sich in der Regel ein Button.

Eine onClick-Aktion für die Link-Komponente von React Router festlegen

Wenn eine Anwendung React Router verwendet, übernimmt dessen Link-Komponente die clientseitige Navigation. Lege das Ziel mit to fest und füge einen entsprechenden Handler mit onClick hinzu, zum Beispiel: <Link to="/account" onClick={handleClick}>Open account</Link>. Dieses JSX ist spezifisch für das Framework und dient als eingebettete Veranschaulichung, nicht als eigenständig ausführbares Beispiel.

Wenn der Handler lediglich eine Nachricht protokolliert, etwas erfasst oder vor der Navigation eine andere Aktion ausführt, lass ihn ohne Aufruf von preventDefault() enden; dann kann der Router zum Ziel aus to navigieren. Rufe event.preventDefault() nur auf, wenn der Klick absichtlich auf der aktuellen Route bleiben soll. Ein HTML-Anker verwendet href; React Routers Link verwendet to als Routenziel.

Eine onClick-Aktion in React direkt mit einer Arrow-Funktion festlegen

Für eine kurze Aktion, die nur an einer Stelle gebraucht wird, kannst du eine Arrow-Funktion direkt in die Prop schreiben: <a href="/account" onClick={() => console.log("Opening account")}>Open account</a>. Der Anker folgt nach der Aktion weiterhin seinem href. Soll diese Navigation unterdrückt werden, nimm das Event in der Arrow-Funktion entgegen und rufe bewusst event.preventDefault() auf.

Inline-Handler sind praktisch für kleine, lokale Aktionen. Verwende einen benannten Handler, wenn die Logik länger ist, wiederverwendet werden soll oder außerhalb des JSX-Markups leichter verständlich ist.

Fazit

Übergib eine Funktion an onClick, um auf einen Klick auf einen React-Link zu reagieren. Verwende das href eines Ankers für die Browsernavigation oder React Routers Link mit to für eine clientseitige Route. Lass die Navigation zu, wenn sie zur Interaktion gehört; rufe preventDefault() nur auf, wenn der Klick die Standardnavigation dieses Links verhindern soll.