Operasi Tindak Balas pada Array dalam React

Mari kita sekarang belajar melakukan manipulasi reaktif dengan elemen array. Untuk ini, kita akan melampirkan penangan acara pada setiap li, di mana kita akan menghantar nombor li ini dalam array sebagai parameter:

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>;
}

Di dalam fungsi kami, kami boleh melakukan sebarang operasi pada elemen array kami:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // lakukan sesuatu dengan elemen
		setNotes(copy);
	}
}

Diberikan array dengan nombor. Paparkannya dalam bentuk senarai ul. Apabila diklik pada mana-mana li, kuasa duakan nombornya.

Di hujung setiap li, buat butang, yang apabila ditekan, li itu akan dipadamkan dari senarai.

Diberikan input. Apabila diklik pada mana-mana li, buat supaya teks li itu masuk ke dalam input.

Ubah suai tugas sebelumnya supaya, apabila input kehilangan fokus, teks yang diubah masuk ke dalam li yang sepadan.

Diberikan butang. Apabila diklik pada butang ini, balikkan susunan li kepada terbalik.