javascript / beginner
Snippet
Übergeben von Argumenten an Ereignishandler-Funktionen in Svelte
Um benutzerdefinierte Argumente an eine Ereignishandler-Funktion in Svelte zu übergeben, wird der Funktionsaufruf in eine Inline-Pfeilfunktion eingebettet. Dies verhindert die sofortige Ausführung beim Rendern der Komponente und ruft den Handler erst beim Klick-Ereignis mit den übergebenen Parametern auf.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<script>let message = "No option selected";function selectOption(optionName) {message = `Selected: ${optionName}`;}</script><button on:click={() => selectOption("A")}>Option A</button><button on:click={() => selectOption("B")}>Option B</button><p>{message}</p>
svelte
Erklärung
1
let message = "No option selected";
Initialisiert eine reaktive Zeichenketten-Zustandsvariable zur Anzeige der aktuellen Auswahl.
2
function selectOption(optionName) {
Definiert eine benutzerdefinierte JavaScript-Funktion, die einen Parameter zur Zustandsaktualisierung entgegennimmt.
3
message = `Selected: ${optionName}`;
Aktualisiert den Zustand mithilfe von Template-Literal-Interpolation.
4
<button on:click={() => selectOption("A")}>Option A</button>
Weist dem Klick-Event eine anonyme Pfeilfunktion zu, die beim Anklicken den String 'A' übergibt.
5
<p>{message}</p>
Gibt die aktualisierte Auswahlmeldung im DOM aus.