Vorms en Plaaslike State in Redux

In vorige lesse het ons geleer hoe om data uit die store te kry en dit in 'n React komponent te vertoon. In hierdie les gaan ons begin om nuwe data by te voeg. Ons gaan dit doen met behulp van 'n vorm, waarmee 'n verkoper 'n nuwe produk kan byvoeg nadat hy/sy dit ingevul het.

Laat ons begin deur te sê dat dit nie altyd sin maak om die globale Redux-state te gebruik nie. Daar is gevalle waar ons vir ons behoeftes plaaslike state kan skep. Met plaaslike state bedoel ons state wat binne 'n spesifieke komponent gebruik word vir tegniese doeleindes. Byvoorbeeld, om iets te versteek of te wys deur op 'n knoppie te druk.

In ons geval sal die gebruiker data in 'n vorm invoer en natuurlik sal ons state hiervoor nodig hê. Ons kon die globale Redux-state gebruik, maar dit sou geen sin maak nie, aangesien ons state slegs sal werk in een deel van die aplikasie, naamlik die vorm om 'n produk by te voeg. Die hoofreël wat gevolg moet word, is dat plaaslike state nie buite die komponent waar hulle geskep is, moet werk nie, en moet ook nooit die store raak nie. So 'n praktyk word dikwels gebruik wanneer vorms geskep word.

Kom ons maak die gids products van ons produk-aplikasie oop, skep die lêer NewProductForm.jsx daarin en voer die hook useState daarin in:

import { useState } from 'react'

Laat ons nou die komponent self met die vorm skep en gewone state daarin skryf, soos ons vantevore in React gedoen het. Ons het state nodig om met die naam, beskrywing, prys en hoeveelheid van die produk te werk:

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

Laat ons dan die standaard verwerking vir elke veld byvoeg wanneer die gebruiker data invoer:

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)

En dan, laat ons in die komponent die opmaak met 'n kop en 'n leë vorm teruggee:

return (
	<div>
		<h2>Voeg 'n Nuwe Produk By</h2>
		<form>
		</form>
	</div>
)

Maak jou studente-aplikasie oop. Skep die lêer NewStudentForm.jsx in die gids students. Skep in die komponent NewStudentForm plaaslike state vir die nodige velde, skryf vir elke veld die verwerking, soos in die les gewys.

Gee in die komponent NewStudentForm die opmaak terug, wat 'n kop en 'n leë vorm bevat.