Formular og lokale tilstande i Redux

I de foregående lektioner lærte vi at hente data fra store og vise dem i en React komponent. I denne lektion vil vi begynde at tilføje nye data. Vi gør dette ved hjælp af et formular, som sælgeren kan udfylde for at tilføje et nyt produkt.

Lad os starte med, at det ikke altid giver mening at bruge Redux' globale tilstand. Der er tilfælde, hvor vi til vores behov kan oprette lokale tilstande. Med lokale tilstande mener vi tilstande, der bruges internt i en specifik komponent til tekniske behov. For eksempel for at skjule eller vise noget ved et klik på en knap.

I vores tilfælde vil brugeren indtaste data i formularen, og selvfølgelig har vi brug for tilstande for at gøre dette. Man kunne bruge den globale Redux-tilstand, men der er ingen mening i det, da vores tilstande kun vil fungere på ét sted i applikationen - i formularen til tilføjelse af et produkt. Den vigtigste regel, som man skal følge, er, at lokale tilstande ikke må fungere uden for komponenten, hvor de er oprettet, og de må på ingen måde berøre store. Denne praksis bruges ofte ved oprettelse af formularer.

Lad os åbne mappen products i vores produktapplikation, oprette en fil i den kaldet NewProductForm.jsx og importere hook'et useState:

import { useState } from 'react'

Lad os nu oprette selve komponenten med formularen og skrive de sædvanlige tilstande i den, som vi tidligere gjorde det i React. Vi har brug for tilstande til at arbejde med produktets navn, beskrivelse, pris og antal:

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

Dernæst tilføjer vi standardhåndtering for hvert felt, når brugeren indtaster data:

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)

Og derefter returnerer vi i komponenten markup med en overskrift og en tom formular:

return (
	<div>
		<h2>Tilføj et nyt produkt</h2>
		<form>
		</form>
	</div>
)

Åbn din applikation med studerende. Opret filen NewStudentForm.jsx i mappen students. Opret lokale tilstande i komponenten NewStudentForm for de nødvendige felter, skriv håndtering for hvert felt, som vist i lektionen.

Returner i komponenten NewStudentForm markup, der indeholder en overskrift og en tom formular.