Redux'ta Formda Değişiklik Yapma

Bu derste, ürün ekleme formundaki satıcı bilgilerini gösterme çalışmamızı tamamlayacağız. Bunun için formun markup'ında küçük değişiklikler yapmamız kalıyor.

Ürün uygulamamızı açalım, içinde NewProductForm.jsx dosyasını açalım. Hadi return komutundan önce, satıcıyı seçeceğimiz açılır liste için biraz markup kodu ekleyelim. Bunu standart map yöntemiyle uygulayalım:

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

Ve şimdi markup'ta değişiklikler yapalım. Bunun için formda birinci ve ikinci paragraflar arasına (ürün adı ve açıklaması için olan markup blokları arasına) aşağıdaki markup'a sahip bir paragraf ekleyelim:

<p>
	<label htmlFor="prodSeller">Satıcı:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Şimdi uygulamamızı çalıştırabiliriz. Ekleme formunda satıcıların olduğu bir liste belirdi. Formu verilerle doldurmayı, bir satıcı seçmeyi ve kaydetme butonuna tıklamayı deneyelim. Şimdi, Redux DevTools'a bakarsak, değişiklikleri göreceğiz - yeni eklenen üründe, değer olarak seçilen satıcının id'si ile seller özelliği ortaya çıktı. Ayrıca State sekmesinde artık iki slice görüntüleniyor: products ve sellers.

Öğrenci uygulamanızı açın. NewStudentForm.jsx dosyasında, derste gösterildiği gibi, öğretmenlerin Ad-Soyad'larının olduğu, map ile oluşturulmuş bir teachersList açılır listesi oluşturun.

Markup'ta, öğretmenler için açılır listeyi gösteren bir blok daha ekleyerek değişiklikler yapın.

Uygulamanızı çalıştırın. Öğrenci ekleme formunda, önceki görevlerde yaptığınız öğretmenlerin olduğu bir açılır liste belirmeli.