ფორმაში ცვლილებების შეტანა 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 შექმენით დროფდაუნ ლისტი teachersList map-ის გამოყენებით, რომელშიც იქნება მასწავლებლების სრული სახელები, როგორც ეს ნაჩვენები იყო გაკვეთილზე.

შეიტანეთ ცვლილებები ვერსტკაში, დაამატეთ კიდევ ერთი ბლოკი დროფდაუნ ლისტის გამოსაჩენად მასწავლებლებთან.

გაუშვით თქვენი აპლიკაცია. დამატების ფორმაში სტუდენტისთვის თქვენ უნდა გამოჩნდეს დროფდაუნ ლისტი მასწავლებლებთან, რომელიც თქვენ გააკეთეთ წინა ამოცანებში.