Reduxda Formalar va Lokal Statelar

Oldingi darslarda biz storeʼdan maʼlumotlarni olishni va ularni React komponentida chiqarishni o‘rgandik. Ushbu darsda yangi maʼlumotlar qoʻshishga kirishamiz. Buni forma orqali amalga oshiramiz, uni toʻldirgan holda, sotuvchi yangi mahsulot qoʻsha oladi.

Keling, shundan boshlaylik, har doim Reduxning global statelaridan foydalanish maʼnoli emas. Baʼzi hollarda biz oʻz ehtiyojlarimiz uchun lokal statelar yaratishimiz mumkin. Lokal statelar deb, maʼlum bir komponent ichida texnik ehtiyojlar uchun ishlatiladigan statelarga aytamiz. Masalan, tugma orqali nimani yashirish yoki koʻrsatish.

Bizning holatda foydalanuvchi forma orqali maʼlumotlarni kiritadi va, tabiiyki, buning uchun statelardan foydalanamiz. Global Redux statelaridan foydalanish mumkin edi, lekin bunda maʼno yoʻq, chunki bizning statelarimiz faqat mahsulot qoʻshish formasi uchun ilovaning bir joyida ishlaydi. Bunda amal qilish kerak boʻlgan asosiy qoida - lokal statelar yaratilgan komponentdan tashqarida ishlamasligi kerak va hech qanday holatda storeʼga tegmasligi kerak. Bunday amaliyot formalar yaratishda tez-tez qoʻllaniladi.

Keling, mahsulotlar ilovamizning products papkasini ochaylik, unda NewProductForm.jsx faylini yaratamiz va unga useState hookini import qilamiz:

import { useState } from 'react'

Endi forma bilan komponentning o'zini yaratamiz va unda avval Reactda qilganimiz kabi oddiy statelarni yozamiz. Bizga mahsulot nomi, tavsifi, narxi va miqdori bilan ishlash uchun statelar kerak:

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

Keyin foydalanuvchi tomonidan maʼlumot kiritilganda har bir maydon uchun standart ishlov berishni qoʻshamiz:

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)

Va keyin komponentda sarlavha va boʻsh forma bilan verstka qaytaramiz:

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

Talabalar ilovangizni oching. students papkasida NewStudentForm.jsx faylini yarating. NewStudentForm komponentida sizga kerak boʻlgan maydonlar uchun lokal statelarni yarating, har bir maydon uchun darsda koʻrsatilganidek ishlov berish yozing.

NewStudentForm komponentida sarlavha va boʻsh formani oʻz ichiga olgan verstka qaytaring.