javascript / beginner
Snippet
Behandlung von Klick-Events in Komponenten
Um eine Komponente in Next.js interaktiv zu machen, definierst du eine Funktion für das Event und übergibst sie an den 'onClick'-Prop. Die 'use client'-Anweisung ist für Interaktivität im App Router erforderlich.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
"use client";export default function AlertButton() {function handleClick() {alert("Button was clicked!");}return (<button onClick={handleClick}>Click Me</button>);}
nextjs
Erklärung
1
"use client";
Teilt Next.js mit, dass dies eine Client-Komponente ist, was die Verwendung von Event-Listenern ermöglicht.
2
onClick={handleClick}
Verknüpft die Funktion 'handleClick' mit dem Klick-Event der Schaltfläche.