Membuat Perubahan pada Borang dalam Redux

Dalam sesi ini, kami akan menyelesaikan kerja untuk memaparkan maklumat tentang penjual dalam borang untuk menambah produk. Untuk melakukan ini, kami hanya perlu mengubah susun atur borang sedikit.

Buka aplikasi produk kami, dan dalamnya fail NewProductForm.jsx. Mari tambah secebis kod sebelum arahan return untuk susun atur senarai juntai bawah, di mana kami akan memilih penjual. Kami akan melaksanakannya melalui kaedah standard dengan map:

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

Dan sekarang mari buat perubahan pada susun atur itu sendiri. Untuk melakukan ini, dalam borang antara perenggan pertama dan kedua (antara blok susun atur untuk nama dan keterangan produk) masukkan perenggan dengan susun atur berikut:

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

Sekarang kami boleh menjalankan aplikasi kami. Dalam borang untuk menambah, kami mempunyai senarai dengan penjual. Mari cuba isi borang dengan data, pilih salah seorang daripadanya dan klik pada butang simpan. Sekarang, jika kami melihat ke dalam Redux DevTools, kami akan melihat perubahan - dalam produk yang baru ditambah kami mempunyai sifat seller dengan id penjual yang dipilih sebagai nilai. Juga dalam tab State kini memaparkan dua kepingan products dan sellers.

Buka aplikasi pelajar anda. Dalam fail NewStudentForm.jsx buat senarai juntai bawah teachersList dengan menggunakan map, yang akan mengandungi Nama guru, seperti yang ditunjukkan dalam pelajaran.

Buat perubahan pada susun atur, dengan menambah satu lagi blok untuk memaparkan senarai juntai bawah dengan guru.

Jalankan aplikasi anda. Dalam borang untuk menambah pelajar, anda sepatutnya mempunyai senarai juntai bawah dengan guru, yang anda buat dalam tugas sebelumnya.