React 2023! Teil-6.1 : Events mit Parameter in React, useState Aufgabe 3
https://github.com/codedeer42/simplyL...
Abo, Like, Kommentar nicht vergessen 🥳😋❤️
Trette der neuen Community ✍️ bei Discord: / discord
React-Playlist: • React
In React werden Events genutzt, um auf Benutzerinteraktionen zu reagieren. Ein Event ist etwas, das passiert, wenn eine Aktion ausgeführt wird, zum Beispiel ein Mausklick oder eine Tastatureingabe. In JavaScript werden Events normalerweise als Objekte zurückgegeben, die Informationen über das auslösende Ereignis enthalten.
In React werden im Gegensatz zum herkömmlichen JavaScript sogenannte synthetische Events verwendet, die als Wrapper für die nativen HTML-Events dienen. Dadurch wird eine einheitliche Schnittstelle für Event-Handling in React bereitgestellt, unabhängig von der Browserkompatibilität. Es ist wichtig zu beachten, dass die Event-Namen in React in CamelCase geschrieben werden, während sie in HTML meistens in Kleinbuchstaben sind.
Im Beispielcode hast du ein einfaches React-Komponentenbeispiel für die Verwendung von Events. Hier wird der "EventsInReact"-Komponente definiert. Innerhalb dieser Komponente wird der Zustand (state) für den "counter" mit dem Wert 0 und die Funktion "setCounter" zum Aktualisieren des Zustands definiert.
Das Event "handeleCounter" wird ebenfalls innerhalb der Komponente definiert. Diese Funktion wird aufgerufen, wenn einer der beiden Buttons geklickt wird. Abhängig davon, welcher Button geklickt wurde, wird der "counter" entweder um 1 erhöht oder um 1 verringert. Beachte, dass hier der "onClick"-Eventhandler auf beide Buttons angewendet wird und somit auf beide Klicks reagiert.
Es ist eine gute Praxis, die Event-Handler in JSX zu verwenden und sie nicht direkt am document-Objekt wie in herkömmlichem JavaScript hinzuzufügen. Dadurch wird der Code besser strukturiert und es ist einfacher, die Interaktionen zwischen Komponenten zu verfolgen.
Abschließend wird der JSX-Code innerhalb der "return"-Anweisung der Komponente gerendert. Es werden zwei Buttons angezeigt, die jeweils mit dem "handeleCounter"-Eventhandler verknüpft sind, und ein Wert, der den aktuellen Wert des "counter"-Zustands anzeigt.
So können Benutzer auf die Buttons klicken, um den Wert des "counter" zu erhöhen oder zu verringern, und das Ergebnis wird direkt auf der Seite angezeigt.
Das ist eine einfache Einführung in die Verwendung von Events in React. Natürlich gibt es noch viel mehr zu entdecken und zu lernen, aber hoffentlich hilft dir diese Erklärung, das Grundkonzept besser zu verstehen!