ฟอร์มและสถานะเฉพาะที่ใน Redux

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

เริ่มจากที่ว่า การใช้สถานะส่วนกลางของ Redux ไม่เหมาะสมในทุกกรณีเสมอไป มีบางกรณีที่เราสามารถสร้างสถานะ เฉพาะที่ เพื่อตอบสนองความต้องการของเราได้ เราจะเรียกสถานะเฉพาะที่ว่าสถานะที่ใช้ภายในคอมโพเนนต์เฉพาะเจาะจงเพื่อจุดประสงค์ทางเทคนิค ตัวอย่างเช่น เพื่อซ่อนหรือแสดงบางสิ่งเมื่อกดปุ่ม

ในกรณีของเรา ผู้ใช้จะป้อนข้อมูลลงในฟอร์ม และแน่นอนว่าเราต้องการสถานะสำหรับสิ่งนี้ เราอาจใช้สถานะส่วนกลางของ Redux แต่ก็ไม่มีความจำเป็น เนื่องจากสถานะของเราจะทำงาน เฉพาะในตำแหน่งเดียวในแอปพลิเคชันสำหรับฟอร์มเพิ่มสินค้าเท่านั้น กฎสำคัญที่ต้องปฏิบัติตามคือ สถานะเฉพาะที่ต้องไม่ทำงานนอกขอบเขตของคอมโพเนนต์ที่สร้างมันขึ้นมา และไม่ควรเกี่ยวข้องกับ store โดยเด็ดขาด แนวทางปฏิบัตินี้มักถูกใช้เมื่อสร้างฟอร์ม

มาเปิดโฟลเดอร์ products ของแอปพลิเคชันสินค้าของเรา สร้างไฟล์ NewProductForm.jsx ภายในนั้น และนำเข้า Hook useState:

import { useState } from 'react'

ตอนนี้เรามาสร้างคอมโพเนนต์ฟอร์มและกำหนดสถานะปกติภายในมัน เช่นเดียวกับที่เราเคยทำใน React เราต้องการสถานะเพื่อจัดการกับชื่อ คำอธิบาย ราคา และจำนวนสินค้า:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

ต่อไป เพิ่มการจัดการมาตรฐานสำหรับแต่ละฟิลด์เมื่อผู้ใช้ป้อนข้อมูล:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

จากนั้น คืนค่าการแสดงผลในคอมโพเนนต์ซึ่งมีหัวเรื่องและฟอร์มว่าง:

return (
	<div>
		<h2>Add a New Product</h2>
		<form>
		</form>
	</div>
)

เปิดแอปพลิเคชันนักเรียนของคุณ สร้างไฟล์ NewStudentForm.jsx ในโฟลเดอร์ students กำหนดสถานะเฉพาะที่ในคอมโพเนนต์ NewStudentForm สำหรับฟิลด์ที่คุณต้องการ เขียนฟังก์ชันจัดการสำหรับแต่ละฟิลด์ ดังที่แสดงในบทเรียน

คืนค่าการแสดงผลในคอมโพเนนต์ NewStudentForm ซึ่งมีหัวเรื่องและฟอร์มว่าง