การประมวลผลข้อมูลฟอร์มเมื่อคลิกปุ่มใน React

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

ลองนึกภาพว่าเราจำเป็นต้องดำเนินการบางอย่างที่ "หนัก" และใช้ทรัพยากรมาก การทำเช่นนั้นทุกครั้งที่ป้อนอักขระไม่เหมาะสมนัก - จะดีกว่าถ้ารอให้การป้อนข้อมูลเสร็จสิ้นก่อนแล้วจึงดำเนินการที่ต้องการเพียงครั้งเดียวและแสดงผลลัพธ์ในย่อหน้า

สำหรับสิ่งนี้เราจำเป็นต้องมีปุ่ม เมื่อคลิกที่ปุ่มนั้นการดำเนินการที่ใช้ทรัพยากรมากของเราจะถูกดำเนินการ ในกรณีนี้แต่ละอินพุตจะมี state ของตัวเองอีกครั้ง บวกกับว่าเราต้องการ state อีกหนึ่งสำหรับบันทึกผลลัพธ์ของการดำเนินการและแสดงบนหน้าจอ

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

มาดำเนินการ:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	function handleChange1(event) {
		setValue1(event.target.value);
	}
	
	function handleChange2(event) {
		setValue2(event.target.value);
	}
	
	function handleClick() {
		setResult(Number(value1) + Number(value2));
	}
	
	return <div>
		<input value={value1} onChange={handleChange1} />
		<input value={value2} onChange={handleChange2} />
		
		<button onClick={handleClick}>btn</button>
		<p>result: {result}</p>
	</div>;
}

สามารถใช้รูปแบบย่อได้:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	return <div>
		<input value={value1} onChange={event => setValue1(event.target.value)} />
		<input value={value2} onChange={event => setValue2(event.target.value)} />
		
		<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
		<p>result: {result}</p>
	</div>;
}

ให้อินพุตสองช่อง ปุ่มสองปุ่ม และย่อหน้าหนึ่ง ยอมให้ป้อนตัวเลขในอินพุต เมื่อคลิกปุ่มแรก ให้หาผลรวมของตัวเลข และเมื่อคลิกปุ่มที่สอง - ให้หาผลคูณ แสดงผลลัพธ์ในย่อหน้า

ให้อินพุตสองช่อง ปุ่มหนึ่งปุ่ม และย่อหน้าหนึ่ง ยอมให้ป้อนวันที่ในอินพุตในรูปแบบ 2025-12-31 เมื่อคลิกปุ่ม ให้หาความแตกต่างระหว่างวันที่เป็นวันและแสดงผลลัพธ์ในย่อหน้า

ปรับเปลี่ยนงานก่อนหน้านี้ โดยให้อินพุตมีวันที่ปัจจุบันตั้งเป็นค่าเริ่มต้น

ให้อินพุตหนึ่งช่องและย่อหน้าหนึ่ง ป้อนตัวเลขในอินพุต เมื่อสูญเสียโฟกัส ให้แสดงผลรวมของหลักของตัวเลขที่ป้อนในย่อหน้า

ให้อินพุตหนึ่งช่องและย่อหน้าหนึ่ง ป้อนตัวเลขในอินพุต เมื่อสูญเสียโฟกัส ให้แสดงผลคูณของตัวหารของตัวเลขที่ป้อนในย่อหน้า