Einführung in Ereignisse in der Expense Manager APP

Hallo da draußen, zukünftige React-Entwickler! Heute tauchen wir in die aufregende Welt der Ereignisse in unserer Expense Manager APP ein. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie bei jedem Schritt mit der Geduld einer Kindergärtnerin führen, die erklärt, warum der Himmel blau ist. Also holen Sie sich Ihr Lieblingsgetränk, machen Sie es sich bequem und lassen Sie uns gemeinsam diese Coding-Abenteuerreise antreten!

Was sind Ereignisse in React?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was Ereignisse sind. Stellen Sie sich vor, Sie sind auf einer Party (natürlich einer React-Party) und jedes Mal, wenn Sie jemanden auf die Schulter tippen, reagieren sie. Das ist im Grunde, was Ereignisse in React sind – sie sind Aktionen, die Antworten in Ihrer Anwendung auslösen.

In unserer Expense Manager APP verwenden wir Ereignisse, um unsere Anwendung interaktiv und reaktionsschnell auf Benutzeraktionen zu machen. Zum Beispiel, wenn ein Benutzer auf einen Button klickt, um eine neue Ausgabe hinzuzufügen, das ist ein Ereignis, das wir behandeln müssen.

Ereignisse in der Expense Manager APP verwalten

Nun, lasst uns die Ärmel hochwerren und unserer Expense Manager einige Interaktivität hinzufügen. Wir beginnen mit einem einfachen Beispiel und bauen schrittweise zu komplexeren Interaktionen auf.

1. Hinzufügen eines "Ausgabe hinzufügen" Buttons

Zunächst fügen wir einen Button hinzu, den Benutzer anklicken können, um eine neue Ausgabe hinzuzufügen. Wir erstellen eine neue Komponente namens AddExpenseButton.

import React from 'react';

const AddExpenseButton = () => {
const handleClick = () => {
console.log('Add Expense button clicked!');
};

return (
<button onClick={handleClick}>Add Expense</button>
);
};

export default AddExpenseButton;

Lassen Sie uns das einmal durchgehen:

• Wir importieren React (immer notwendig für JSX).
• Wir definieren eine funktionale Komponente namens AddExpenseButton.
• Innerhalb der Komponente definieren wir eine Funktion namens handleClick. Derzeit protokolliert sie nur eine Nachricht in die Konsole.
• In der Return-Anweisung rendern wir einen Button mit einem onClick-Attribut. Dieses Attribut ist, wie wir unseren Ereignis-Handler an den Button anhängen.

Jetzt wird jedes Mal, wenn der Button geklickt wird, 'Add Expense button clicked!' in die Konsole protokolliert. Es ist, als ob Sie Ihrer App das Sprechen beibringen – jeder Klick ist ein Wort, das es lernt!

2. Erstellen eines Ausgabenformulars

Als nächstes erstellen wir ein Formular, in das Benutzer die Details ihrer Ausgabe eingeben können. Wir nennen diese Komponente ExpenseForm.

import React, { useState } from 'react';

const ExpenseForm = () => {
const [title, setTitle] = useState('');
const [amount, setAmount] = useState('');
const [date, setDate] = useState('');

const handleTitleChange = (event) => {
setTitle(event.target.value);
};

const handleAmountChange = (event) => {
setAmount(event.target.value);
};

const handleDateChange = (event) => {
setDate(event.target.value);
};

const handleSubmit = (event) => {
event.preventDefault();
console.log('Form submitted:', { title, amount, date });
// Hier würden Sie normalerweise diese Daten an eine übergeordnete Komponente oder API senden
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={handleTitleChange} placeholder="Expense Title" />
<input type="number" value={amount} onChange={handleAmountChange} placeholder="Amount" />
<input type="date" value={date} onChange={handleDateChange} />
<button type="submit">Add Expense</button>
</form>
);
};

export default ExpenseForm;

Das ist viel zu verdauen! Lassen Sie uns das Schritt für Schritt durchgehen:

1. Wir importieren useState von React, um den Zustand unseres Formulars zu verwalten.
2. Wir erstellen Zustandsvariablen für title, amount und date mit dem useState-Hook.
3. Wir definieren Handler-Funktionen für jedes Eingabefeld. Diese Funktionen aktualisieren den Zustand, wenn der Benutzer tippt.
4. Wir erstellen eine handleSubmit-Funktion, die das Standardformularular-Submit-Verhalten verhindert und die Formulardaten protokolliert.
5. In der JSX erstellen wir ein Formular mit Eingabefeldern für Titel, Betrag und Datum. Jedes Eingabefeld hat ein value-Prop (kontrolliert durch den Zustand) und ein onChange-Prop (zeigt auf seine Handler-Funktion).
6. Das Formular hat ein onSubmit-Prop, das auf unsere handleSubmit-Funktion zeigt.

Dieses Formular ist wie eine gut trainierte Sekretärin – es hört sorgfältig auf alles, was Sie ihm sagen, und erinnert sich an alles!

3. Den Zustand nach oben heben

Nun,angenommen, wir möchten die neue Ausgabe zu einer Liste von Ausgaben hinzufügen. Wir müssen unseren Zustand nach oben heben zu einer übergeordneten Komponente. Lassen Sie uns eine ExpenseManager-Komponente erstellen:

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';

const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);

const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};

return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} />
</div>
);
};

export default ExpenseManager;

Und lassen Sie uns unsere ExpenseForm anpassen, um die onAddExpense-Prop zu verwenden:

import React, { useState } from 'react';

const ExpenseForm = ({ onAddExpense }) => {
// ... vorherige Zustands- und Handler-Definitionen ...

const handleSubmit = (event) => {
event.preventDefault();
onAddExpense({ title, amount, date });
setTitle('');
setAmount('');
setDate('');
};

// ... Rest des Komponenten ...
};

export default ExpenseForm;

Jetzt, wenn das Formular submitted wird, ruft es die onAddExpense-Funktion auf, die von der übergeordneten Komponente übergeben wurde, und fügt die neue Ausgabe zur Liste hinzu. Es ist, als ob eine Familie zusammenarbeitet – das Kind (ExpenseForm) erzählt dem Elternteil (ExpenseManager) von der neuen Ausgabe, und der Elternteil erinnert sich daran für alle!

4. Löschfunktion hinzufügen

Schließlich fügen wir die Fähigkeit hinzu, Ausgaben zu löschen. Wir passen unsere ExpenseList-Komponente an:

import React from 'react';

const ExpenseList = ({ expenses, onDeleteExpense }) => {
return (
<ul>
{expenses.map((expense, index) => (
<li key={index}>
{expense.title} - ${expense.amount} ({expense.date})
<button onClick={() => onDeleteExpense(index)}>Delete</button>
</li>
))}
</ul>
);
};

export default ExpenseList;

Und wir aktualisieren unseren ExpenseManager:

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';

const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);

const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};

const deleteExpense = (index) => {
setExpenses((prevExpenses) => prevExpenses.filter((_, i) => i !== index));
};

return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} onDeleteExpense={deleteExpense} />
</div>
);
};

export default ExpenseManager;

Jetzt haben wir einen voll funktionsfähigen Expense Manager mit den Fähigkeiten, Ausgaben hinzuzufügen und zu löschen!

Fazit

Glückwunsch! Sie haben gerade eine reaktive Expense Manager-Anwendung gebaut. Sie haben gelernt, wie man Ereignisse behandelt, den Zustand verwaltet und Daten zwischen Komponenten überträgt. Denken Sie daran, dass das Lernen von React wie das Fahrradfahren ist – am Anfang mag es wackelig erscheinen, aber mit Übung werden Sie schnell davon cruisen!

Hier ist eine Tabelle, die die Ereignis-Handler zusammenfasst, die wir verwendet haben:

Ereignis-Handler	Komponente	Zweck
handleClick	AddExpenseButton	Protokolliert eine Nachricht, wenn der Button geklickt wird
handleTitleChange	ExpenseForm	Aktualisiert den Titel-Zustand, wenn die Eingabe geändert wird
handleAmountChange	ExpenseForm	Aktualisiert den Betrag-Zustand, wenn die Eingabe geändert wird
handleDateChange	ExpenseForm	Aktualisiert den Datum-Zustand, wenn die Eingabe geändert wird
handleSubmit	ExpenseForm	Verhindert das Standardformularular-Submit-Verhalten und fügt eine neue Ausgabe hinzu
onAddExpense	ExpenseManager	Fügt eine neue Ausgabe zur Liste der Ausgaben hinzu
onDeleteExpense	ExpenseManager	Entfernt eine Ausgabe aus der Liste der Ausgaben

Weiterscrollen, weiterscrollen und vor allem: Spaß haben! React ist eine Reise, und Sie sind auf dem besten Weg, ein React-Meister zu werden. Bis zum nächsten Mal, fröhliches Coden!

Credits: Image by storyset