การทำปฏิกิริยาของสเตตใน React

ตอนนี้เรามาดูกันว่าการทำปฏิกิริยาทำงานอย่างไร มันทำให้เมื่อสเตตเปลี่ยนแปลง การเปลี่ยนแปลงนั้น จะแสดงผลบนหน้าจอทันที

มาดูตัวอย่างกัน สมมติว่าเรามีสเตตสำหรับชื่อ สินค้า:

const [name, setName] = useState('prod');

แสดงชื่อสินค้าในส่วน markup:

return <div>
	<span>{name}</span>
</div>;

ตอนนี้มาสร้างปุ่ม ที่เมื่อกด สเตตของเราจะเปลี่ยนแปลง:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

ในตัวจัดการเหตุการณ์คลิก เราใช้ฟังก์ชัน setName เพื่อตั้งชื่อใหม่ให้สินค้า:

function clickHandler() {
	setName('xxxx');
}

มารวบรวมโค้ดทั้งหมดของเราเข้าด้วยกัน จะได้ว่า หลังจากกดปุ่ม ข้อความจะเปลี่ยนเป็น ค่าใหม่ทันที:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

การใช้ฟังก์ชันแยกเป็นตัวจัดการ ไม่จำเป็นเสมอไป สามารถใช้ฟังก์ชันลูกศรแบบไม่ระบุชื่อได้:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

กำหนดให้มีสเตตสำหรับชื่อและนามสกุลของผู้ใช้ แสดงค่าเหล่านั้นในส่วน markup สร้าง ปุ่มสำหรับเปลี่ยนค่า สเตตเหล่านี้