Űrlapok és lokális állapotok a Redux-ban

A korábbi leckéken megtanultuk, hogyan kell adatokat kinyerni a store-ból és megjeleníteni azokat egy React komponensben. Ezen a leckén átmegyünk az új adatok hozzáadására. Ezt egy űrlap segítségével fogjuk megtenni, amelynek kitöltésével az eladó hozzáadhat egy új terméket.

Kezdjük azzal, hogy nem mindig van értelme a Redux globális állapotának használatának. Vannak esetek, amikor a saját igényeinkre lokális állapotokat hozhatunk létre. Lokális állapotoknak nevezzük azokat az állapotokat, amelyeket egy adott komponensen belül használunk technikai igényekre. Például, hogy elrejtsünk vagy megjelenítsünk valamit egy gombra kattintva.

Esetünkben a felhasználó adatokat fog bevinni egy űrlapba, és természetesen ehhez állapotokra lesz szükségünk. Használhatnánk a globális Redux állapotot is, de ennek nincs értelme, mivel az állapotaink csak egy helyen, a termék hozzáadására szolgáló űrlapnál fognak működni az alkalmazáson belül. A fő szabály, amit követni kell - a lokális állapotok nem dolgozhatnak azon komponensen kívül, amelyben létre lettek hozva, és semmiképpen sem érinthetik a store-t. Ez a gyakorlat gyakran alkalmazott az űrlapok létrehozásánál.

Nyissuk meg a products mappánkat a termék alkalmazásunkban, hozzunk létre benne egy NewProductForm.jsx fájlt és importáljuk bele a useState hook-ot:

import { useState } from 'react'

Most hozzuk létre magát a komponenst az űrlappal és írjunk bele szokásos állapotokat, ahogyan korábban tettük a React-ban. Állapotokra van szükségünk a termék nevével, leírásával, árával és mennyiségével való munkavégzéshez:

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

Ezután adjuk hozzá a szabványos feldolgozást minden egyes mezőhöz, amikor a felhasználó adatokat ír be:

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)

Majd a komponensben adjuk vissza a felületet címmel és egy üres űrlappal:

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

Nyissa meg a diák alkalmazását. Hozzon létre egy NewStudentForm.jsx fájlt a students mappában. Hozzon létre a NewStudentForm komponensben lokális állapotokat a szükséges mezőihez, írjon minden mezőhöz feldolgozást, ahogyan a leckében is látható.

A NewStudentForm komponensben adjon vissza egy felületet, amely tartalmaz egy címet és egy üres űrlapot.