Fomu na Hali za Ndani katika Redux

Katika masomo yaliyopita, tulijifunza kupata data kutoka kwa duka na kuzionyesha katika kijenzi cha React. Katika somo hili, tutaanza kuongeza data mpya. Tutafanya hivyo kwa kutumia fomu, ambayo baada ya kujazwa, mwuuzi ataweza kuongeza bidhaa mpya.

Tutaanza kwa kusema kwamba si lazima kila wakati tutumie hali ya globali ya Redux. Kuna nyakati ambapo tunaweza kuunda hali za ndani kwa mahitaji yetu. Hali za ndani tutazitaja kama hali zinazotumika ndani ya kijenzi maalum kwa mahitaji ya kiufundi. Kwa mfano, ili kuficha au kuonyesha kitu kwa kubofya kitufe.

Katika kesi yetu, mtumiaji ataingiza data kwenye fomu na, kwa kawaida, hitaji litatokea kwa hili. Tungeweza kutumia hali ya globali ya Redux, lakini haina maana, kwani hali zetu zitatumika tu katika sehemu moja ya programu kwa fomu ya kuongeza bidhaa. Kanuni kuu ambayo inapaswa kufuatwa - haifai hali za ndani kufanya kazi nje ya kijenzi ambacho zimeundwa ndani yake, na kwa hali yoyote usiishie kugusa duka. Tabia hii hutumika mara nyingi wakati wa kuunda fomu.

Wacha tufungue folda products ya programu yetu ya bidhaa, tuunde ndani yake faili NewProductForm.jsx na tuingize ndani yake kona useState:

import { useState } from 'react'

Sasa tuunde kijenzi chenyewe chenye fomu na tuandike ndani yake hali za kawaida, kama tulivyofanya hapo awali katika React. Tunahitaji hali za kufanya kazi na jina, maelezo, bei na idadi ya bidhaa:

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

Ifuatayo tuongeze usindikaji wa kawaida kwa kila uwanja wakati mtumiaji anaingiza 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)

Kisha turudishe kwenye kijenzi muundo wa wavuti ulio na kichwa na fomu tupu:

return (
	<div>
		<h2>Ongeza Bidhaa Mpya</h2>
		<form>
		</form>
	</div>
)

Fungua programu yako ya wanafunzi. Unda faili NewStudentForm.jsx kwenye folda students. Weka ndani ya kijenzi NewStudentForm hali za ndani kwa ziwanja unazohitaji, andika kwa kila uwanja usindikaji, kama inavyoonyeshwa kwenye somo.

Rudisha kwenye kijenzi NewStudentForm muundo wa wavuti, unao vyenye kichwa na fomu tupu.