Redux-те формаға өзгерістер енгізу

Осы сабақта біз сатушы туралы ақпаратты өнім қосу формасында шығару бойынша жұмысты аяқтаймыз. Ол үшін бізге форма версткасын сәл өзгерту қалады.

Өнімдер қолданбасын ашып, ондағы NewProductForm.jsx файлын ашайық. return командасының алдына сатушыны таңдайтын ашылмалы тізімнің версткасы үшін код бөлігін қосамыз. Оны map арқылы стандартты әдіспен жасаймыз:

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

Енді верстканың өзін өзгертейік. Ол үшін формада бірінші және екінші абзацтардың арасына (өнім атауы мен сипаттамасының верстка блоктары арасына) келесі версткасы бар абзацты саламыз:

<p>
	<label htmlFor="prodSeller">Сатушы:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Қазір біз қолданбамызды іске қоса аламыз. Қосу формасында бізде сатушылар тізімі пайда болды. Форманы деректермен толтырып, олардың бірін таңдап, сақтау түймесін басуға тырысайық. Енді Redux DevTools-қа қарасақ, біз өзгерістерді көреміз - жаңа қосылған өнімде бізде seller сипаты пайда болды, онда таңдалған сатушының id мәні ретінде тұр. Сондай-ақ State жәбіршесінде енді екі слайс products және sellers көрсетіледі.

Студенттер қолданбасын ашыңыз. NewStudentForm.jsx файлында map көмегімен teachersList ашылмалы тізімін жасаңыз, онда сабақта көрсетілгендей оқытушылардың АЖ-ы болады.

Версткаға өзгерістер енгізіп, оқытушылармен ашылмалы тізімді шығару үшін тағы бір блок қосыңыз.

Қолданбаңызды іске қосыңыз. Студент қосу формасында сізде алдыңғы тапсырмаларда жасаған оқытушылармен ашылмалы тізім пайда болуы керек.