การดำเนินการแบบรีแอคทีฟบนอาร์เรย์ใน React

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

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	
	const result = notes.map((note, index) => {
		return <li key={index} onClick={() => doSmth(index)}>
			{note}
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

ภายในฟังก์ชันของเรา เราสามารถดำเนินการใด ๆ กับอิลิเมนต์ของอาร์เรย์ของเราได้:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // ทำบางอย่างกับอิลิเมนต์
		setNotes(copy);
	}
}

กำหนดอาร์เรย์ที่มีตัวเลข แสดงผลในรูปแบบรายการ ul เมื่อคลิกที่ li ใด ๆ ให้ยกกำลังสองตัวเลขของมัน

ท้ายแต่ละ li ให้สร้างปุ่ม เมื่อกดที่ปุ่มนั้น li นั้นจะถูกลบออกจากรายการ

กำหนดอินพุต เมื่อคลิกที่ li ใด ๆ ให้ทำให้ ข้อความของ li นั้นปรากฏในอินพุต

ปรับเปลี่ยนโจทย์ก่อนหน้าให้ เมื่ออินพุตสูญเสียโฟกัส ข้อความที่แก้ไข จะถูกนำไปยัง li ที่เกี่ยวข้อง

กำหนดปุ่ม เมื่อคลิกที่ปุ่มนี้ ให้กลับลำดับของ li เป็นลำดับย้อนกลับ