การเพิ่มฟอร์มลงใน Redux

ในบทเรียนที่ผ่านมาเราได้เรียนรู้ว่าสำหรับฟิลด์ อินพุตของฟอร์มสามารถใช้ state ซึ่ง จะทำงานภายในคอมโพเนนต์เดียวเท่านั้น และเราได้สร้างฟอร์มว่างขึ้นมา

ภายในแท็ก form เรามาเพิ่ม markup สำหรับแต่ละฟิลด์ที่จะกรอกข้อมูลกัน อินพุตแรกของเราจะรับผิดชอบ ชื่อผลิตภัณฑ์และ markup ของมัน จะเป็นแบบนี้:

<form>
	<p>
		<label htmlFor="productName">ชื่อ:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

อันที่สองของเราจะเป็น textarea สำหรับคำอธิบาย ผลิตภัณฑ์:

<p>
	<label htmlFor="productDesc">คำอธิบาย:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

เขียนโค้ดสำหรับอินพุตที่เหลืออีกสองฟิลด์ สำหรับราคาและจำนวนด้วย id productPrice และ productAmount ด้วยตัวเอง

หลังจากฟิลด์อินพุตทั้งสี่ ก่อน แท็กปิด form ให้เพิ่ม ปุ่มสำหรับบันทึก:

<button type="button">บันทึก</button>

คอมโพเนนต์ฟอร์มของเราพร้อมแล้ว มาลองแสดง มันบนหน้าแรกกัน เปิด ไฟล์ root.jsx นำเข้าคอมโพเนนต์:

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

และแทรกมันระหว่างแท็ก hr และ คอมโพเนนต์ ProductsList แบบนี้:

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

มาเรียกใช้แอปพลิเคชันของเราและชม ฟอร์มและรายการผลิตภัณฑ์กัน มาลอง เพิ่มสไตล์ใน 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;
}

เปิดแอปพลิเคชันนักศึกษาของคุณ สร้าง markup สำหรับฟอร์มของคุณตามที่ แสดงในบทเรียน

เพิ่มคอมโพเนนต์ที่เสร็จสมบูรณ์ NewStudentForm ลงในหน้าแรกก่อน StudentsList