Binding Input ke Array di React

Misalkan dalam state notes disimpan sebuah array:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		
	</div>;
}

Misalkan kita juga memiliki fungsi pembantu, yang mencari jumlah elemen array:

function getSum(arr) {
	let sum = 0;
	
	for (const elem of arr) {
		sum += +elem;
	}
	
	return sum;
}

function App() {
	...
}

Mari kita cari dan tampilkan jumlah elemen array kita dari state, dengan menggunakan fungsi pembantu kita untuk ini:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		{getSum(notes)}
	</div>;
}

Sekarang mari kita buat tiga input dan di value setiap input, tulis salah satu elemen array:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		<input value={notes[0]} />
		<input value={notes[1]} />
		<input value={notes[2]} />
		
		{getSum(notes)}
	</div>;
}

Sekarang mari kita tambahkan event onChange ke input kita. Pada saat yang sama, kita buat satu fungsi penangan umum untuk event ini:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// fungsi penangan umum
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

Seperti yang Anda lihat, fungsi changeHandler pada parameter pertama menerima nomor elemen array yang diedit oleh input ini.

Berdasarkan nomor ini, kita dapat mengganti elemen array dengan konten input.

Mari kita lakukan ini:

function changeHandler(index, event) {
	setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
}

Sekarang kita dapat mengedit input mana pun, dan array akan berubah secara reaktif dan, karenanya, jumlah elemennya akan dihitung ulang.

Mari kita kumpulkan semua kode kita bersama:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

Dapat dibuat agar input dibentuk dalam sebuah loop:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	const result = notes.map((note, index) => {
		return <input
			key={index}
			value={note}
			onChange={event => changeHandler(index, event)}
		/>;
	});
	
	return <div>
		{result}
		{getSum(notes)}
	</div>;
}

Diberikan array berikut:

[1, 2, 3, 4, 5, 6, 7, 8, 9]

Tampilkan rata-rata aritmatika elemen array ini di layar. Dalam sebuah loop, buat input untuk mengedit elemen.