Formulare und lokale States in Redux

In vorherigen Lektionen haben wir gelernt, Daten aus dem Store abzurufen und in einer React-Komponente auszugeben. In dieser Lektion werden wir damit beginnen, neue Daten hinzuzufügen. Wir werden dies mit Hilfe eines Formulars tun, indem der Verkäufer ein neues Produkt hinzufügen kann, nachdem er es ausgefüllt hat.

Beginnen wir damit, dass es nicht immer sinnvoll ist, den globalen Redux-State zu verwenden. Es gibt Fälle, in denen wir für unsere Bedürfnisse lokale States erstellen können. Als lokale States bezeichnen wir States, die innerhalb einer bestimmten Komponente für technische Zwecke verwendet werden. Zum Beispiel, um etwas per Knopfdruck zu verstecken oder anzuzeigen.

In unserem Fall wird der Benutzer Daten in ein Formular eingeben, und natürlich werden wir dafür States benötigen. Man könnte den globalen Redux-State verwenden, aber das macht keinen Sinn, da unsere States nur an einer Stelle der Anwendung für das Formular zur Produkthinzufügung arbeiten sollen. Die Hauptregel, die dabei befolgt werden muss, ist, dass lokale States nicht außerhalb der Komponente, in der sie erstellt wurden, arbeiten dürfen, und auf keinen Fall den Store betreffen dürfen. Eine solche Praxis wird oft bei der Erstellung von Formularen verwendet.

Lassen Sie uns den Ordner products unserer Produktanwendung öffnen, darin eine Datei NewProductForm.jsx erstellen und den Hook useState importieren:

import { useState } from 'react'

Erstellen wir nun die Komponente mit dem Formular und legen darin normale States an, wie wir es früher in React gemacht haben. Wir benötigen States für die Arbeit mit dem Namen, der Beschreibung, dem Preis und der Menge des Produkts:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

Als nächstes fügen wir die Standardbehandlung für jedes Feld hinzu, wenn der Benutzer Daten eingibt:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

Und dann geben wir im Komponenten das Markup mit einer Überschrift und einem leeren Formular zurück:

return (
	<div>
		<h2>Add a New Product</h2>
		<form>
		</form>
	</div>
)

Öffnen Sie Ihre Studentenanwendung. Erstellen Sie eine Datei NewStudentForm.jsx im Ordner students. Legen Sie in der Komponente NewStudentForm lokale States für die benötigten Felder an, schreiben Sie für jedes Feld eine Behandlung, wie in der Lektion gezeigt.

Geben Sie in der Komponente NewStudentForm ein Markup zurück, das eine Überschrift und ein leeres Formular enthält.