Thực hiện thay đổi trên biểu mẫu trong Redux

Trong buổi học này, chúng ta sẽ hoàn thành công việc hiển thị thông tin về người bán trong biểu mẫu thêm sản phẩm. Để làm điều này, chúng ta chỉ cần thay đổi một chút bố cục của biểu mẫu.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó mở file NewProductForm.jsx. Hãy thêm một đoạn mã bố cục cho danh sách dropdown, nơi chúng ta sẽ chọn người bán, trước lệnh return. Chúng ta sẽ triển khai nó thông qua cách thức tiêu chuẩn với map:

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

Và bây giờ hãy thực hiện thay đổi trong chính bố cục. Để làm điều này, trong biểu mẫu giữa đoạn văn thứ nhất và thứ hai (giữa các khối bố cục cho tên và mô tả sản phẩm) hãy chèn một đoạn văn với bố cục sau:

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

Bây giờ chúng ta có thể khởi chạy ứng dụng của mình. Trong biểu mẫu thêm, một danh sách người bán đã xuất hiện cho chúng ta. Hãy thử điền dữ liệu vào biểu mẫu, chọn một trong số họ và nhấp vào nút lưu. Bây giờ, nếu chúng ta xem vào Redux DevTools, chúng ta sẽ thấy những thay đổi - trong sản phẩm mới được thêm vào, một thuộc tính seller với id của người bán được chọn làm giá trị đã xuất hiện. Ngoài ra, trong tab State bây giờ hiển thị hai slice products và sellers.

Hãy mở ứng dụng sinh viên của bạn. Trong file NewStudentForm.jsx, hãy tạo danh sách dropdown teachersList với sự trợ giúp của map, trong đó sẽ có Họ và tên của giảng viên, như được trình bày trong bài học.

Hãy thực hiện thay đổi trong bố cục, bằng cách thêm một khối nữa để hiển thị danh sách dropdown với các giảng viên.

Khởi chạy ứng dụng của bạn. Trong biểu mẫu thêm sinh viên, một danh sách dropdown với các giảng viên mà bạn đã làm trong các nhiệm vụ trước đó sẽ phải xuất hiện.