Thêm biểu mẫu vào Redux

Ở bài học trước, chúng ta đã biết rằng có thể áp dụng các state cho các trường nhập liệu của biểu mẫu, chúng sẽ chỉ hoạt động bên trong một thành phần duy nhất, và đã tạo một biểu mẫu trống.

Hãy đặt cấu trúc HTML bên trong các thẻ form cho từng trường, nơi thông tin sẽ được nhập vào. Input đầu tiên của chúng ta sẽ chịu trách nhiệm cho tên sản phẩm và cấu trúc HTML của nó sẽ như thế này:

<form>
	<p>
		<label htmlFor="productName">Tên:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

Thứ hai chúng ta sẽ có textarea cho mô tả sản phẩm:

<p>
	<label htmlFor="productDesc">Mô tả:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Hãy tự viết code cho hai input còn lại cho giá cả và số lượng với id lần lượt là productPrice và productAmount.

Sau tất cả bốn trường nhập liệu, trước thẻ đóng form, hãy thêm một nút để lưu:

<button type="button">lưu</button>

Thành phần biểu mẫu của chúng ta đã sẵn sàng. Hãy hiển thị nó trên trang chủ. Để làm điều này, hãy mở tệp root.jsx, import thành phần vào đó:

import { NewProductForm } from '../parts/products/NewProductForm'

Và chèn nó vào giữa thẻ hr và thành phần ProductsList như thế này:

<hr></hr>
<NewProductForm />
<ProductsList />

Hãy chạy ứng dụng của chúng ta và chiêm ngưỡng biểu mẫu và danh sách sản phẩm. Hãy thêm một số kiểu dáng vào index.css:

#main-page {
	max-width: 600px;
}

select,
textarea,
input,
button {
	font-size: 18px;
}

form {
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
	padding-bottom: 10px;
}

form p {
	margin: 5px;
}

Hãy mở ứng dụng về sinh viên của bạn. Tạo cấu trúc HTML cho biểu mẫu của bạn, như đã được trình bày trong bài học.

Thêm thành phần hoàn chỉnh NewStudentForm vào trang chủ trước StudentsList