ReactJS - Erstellung einer ereignisbewussten Komponente

Hallo da draußen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der ereignisbewussten Komponenten in ReactJS. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials werden Sie in der Lage sein, Komponenten zu erstellen, die auf Benutzereingaben wie ein Profi reagieren können!

Was ist eine ereignisbewusste Komponente?

Bevor wir tiefer einsteigen, lassen Sie uns verstehen, was wir mit einer "ereignisbewussten" Komponente meinen. Stellen Sie sich vor, Sie sind auf einer Party (bleiben Sie bei mir, das hat mit Programmieren zu tun, ich verspreche es!). Sie stehen nicht einfach da wie eine Statue – Sie reagieren auf das, was um Sie herum passiert. Jemand erzählt einen Witz, Sie lachen. Jemand bietet Ihnen Essen an, Sie nehmen es. Genau das tut eine ereignisbewusste Komponente in React – sie reagiert auf das, was passiert, wie zum Beispiel Button-Klicks oder Tastatureingaben.

Wie erstellt man eine ereignisbewusste Komponente?

Nun, lasSEN wir die Ärmel hochwerren und unsere erste ereignisbewusste Komponente erstellen. Wir beginnen mit etwas Einfachem – einem Button, der zählt, wie oft er geklickt wurde.

Schritt 1: Einrichten der Komponente

Zuerst erstellen wir eine grundlegende React-Komponente:

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

return (
<div>
<button>Click me!</button>
<p>You've clicked {count} times</p>
</div>
);
}

export default ClickCounter;

Lassen Sie uns das auseinandernehmen:

1. Wir importieren React und useState aus der 'react'-Bibliothek.
2. Wir definieren eine Funktionskomponente namens ClickCounter.
3. Innen verwenden wir den useState-Hook, um die Zustandsvariable count und eine Funktion zum Aktualisieren, setCount, zu erstellen.
4. Wir geben etwas JSX mit einem Button und einem Absatz zurück, der die aktuelle Anzahl anzeigt.

Schritt 2: Hinzufügen des Ereignisbehandlungsfunktion

Nun machen wir unseren Button so, dass er tatsächlich etwas tut, wenn er geklickt wird:

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<button onClick={handleClick}>Click me!</button>
<p>You've clicked {count} times</p>
</div>
);
}

export default ClickCounter;

Was ist neu hier?

1. Wir haben eine handleClick-Funktion hinzugefügt, die den count um 1 erhöht.
2. Wir haben ein onClick-Attribut zu unserem Button hinzugefügt und es auf handleClick gesetzt.

Jetzt wird jedes Mal, wenn der Button geklickt wird, handleClick aufgerufen und unser Zähler aktualisiert!

Zusätzliche Informationen an die Ereignisbehandlungsfunktion übergeben

Manchmal möchten wir zusätzliche Informationen an unsere Ereignisbehandlungsfunktionen übergeben. Lassen Sie uns ein komplexeres Beispiel erstellen – eine Liste von Früchten, bei der das Klicken auf eine Frucht ihren Namen protokolliert.

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

const handleFruitClick = (fruitName) => {
console.log(`You clicked on ${fruitName}`);
};

return (
<ul>
{fruits.map((fruit, index) => (
<li key={index} onClick={() => handleFruitClick(fruit)}>
{fruit}
</li>
))}
</ul>
);
}

export default FruitList;

Lassen Sie uns das auseinandernehmen:

1. Wir haben ein Array von fruits.
2. Unsere handleFruitClick-Funktion nimmt einen fruitName-Parameter und protokolliert ihn.
3. In unserem JSX verwenden wir map, um für jede Frucht ein Listenelement zu erstellen.
4. Das onClick für jedes Element wird auf eine Pfeilfunktion gesetzt, die handleFruitClick mit dem Namen der Frucht aufruft.

Auf diese Weise übergeben wir den Namen der Frucht an unsere Ereignisbehandlungsfunktion, wenn sie geklickt wird!

Häufige Ereignisbehandlungsfunktionen in React

React unterstützt eine Vielzahl von Ereignisbehandlungsfunktionen. Hier ist eine Tabelle mit einigen häufigen:

Schlussfolgerung

Glückwunsch! Sie haben gerade Ihre ersten Schritte in Richtung der Erstellung von ereignisbewussten Komponenten in React unternommen. Wir haben die Grundlagen des Umgangs mit Klicks, der Aktualisierung des Zustands basierend auf Ereignissen und sogar das Übergeben zusätzlicher Informationen an unsere Ereignisbehandlungsfunktionen behandelt.

Denken Sie daran, dass das Beherrschen dieser Fähigkeiten wie das Lernen zu tanzen ist – es erfordert Übung! Lassen Sie sich nicht entmutigen, wenn es nicht sofort klappt (intendierter Scherz). Halten Sie experimentierfreudig, versuchen Sie, verschiedene Arten von interaktiven Komponenten zu erstellen, und bald werden Sie komplexe Benutzerinteraktionen mühelos choreografieren können!

In meinen Jahren des Unterrichtens habe ich unzählige Schüler gesehen, die von Verwirrung zur Sicherheit gereift sind. Sie sind auf dem besten Weg, zu ihren Reihen zu stoßen. Bleiben Sie am Code, bleiben Sie neugierig und vor allem – haben Sie Spaß dabei!

Credits: Image by storyset