Redux-da formalar we lokal ýagdaýlar

Öňki sapaklarda biz maglumatlary store-dan almagy we olary React komponentinde görkezmegi öwrendik. Bu sapakda biz täze maglumatlar goşmaga başlarys. Muny biz forma arkaly ederis, ony dolduran söwda ediji täze önüm goşup biler.

Redux-daky global ýagdaýy her wagt ulanyp bolmaýandygyny bilip başlalyň. Biziň zerurlyklarymyz üçin lokal ýagdaýlar döredip bolýan ýagdaýlar hem bolýar. Lokal ýagdaýlar diýip biz belli bir komponentde tehniki zerurlyklar üçin ulanylýan ýagdaýlara aýdarys. Mysal üçin, düwmäniň üsti bilen bir zady gizlemek ýa-da görkezmek üçin.

Biziň ýagdaýymyzda ulanyjy forma üstünden maglumatlar girizer we, elbetde, bun üçin ýagdaýlar bize gerek bolar. Global Redux ýagdaýyndan peýdalanyp bolardy, ýöne munuň manysy ýok, sebäbi biziň ýagdaýlarymyz diňe bir ýerde, önüm goşmak formasy üçin işler. Munuň üçin berjer bolmaly esasy düzgün - lokal ýagdaýlar döredilen komponentden daşarda işlemeli däldir we hiç hili ýagdaýda store-a degmelidir. Bu usul köplenç formalar döredilende ulanylýar.

Geliň, bizim products önümler katalogyndaky programmany açalyň, onuň içinde NewProductForm.jsx faýlyny dörediň we ona useState garmasyny import edeliň:

import { useState } from 'react'

Indi özi forma bilen komponenti dörediň we onda adaty ýagdaýlary ýazyp goýuň, biz muny öň React-de edişimiz ýaly. Bizim önümiň ady, düşündirişi, bahasy we sany üçin işlemek üçin ýagdaýlar gerek:

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

Indiki bolsa, ulanyjy maglumat girizen wagty her bir meýdan üçin standart işlemiş goşalyň:

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)

Soň bolsa komponentde sarpaw bilen we boş forma bilen sahypa görnüşini gaýtaryň:

return (
	<div>
		<h2>Täze Önüm Goş</h2>
		<form>
		</form>
	</div>
)

Talyp programmany açyň. students katalogynda NewStudentForm.jsx faýlyny dörediň. NewStudentForm komponentinde size gerek bolan meýdanlar üçin lokal ýagdaýlar düzüň, her bir meýdan üçin sapakda görkezilişi ýaly işlemiş ýazyň.

NewStudentForm komponentinde sarpawy we boş formany öz içine alýan sahypa görnüşini gaýtaryň.