Mengikat Input kepada Array dalam React

Katakan dalam state notes disimpan sebuah array:

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

Katakan kita juga mempunyai 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 cari dan paparkan jumlah elemen array kita dari state, dengan menggunakan fungsi pembantu kita:

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

Sekarang mari buat tiga input dan dalam value setiap input tulis satu daripada 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 tambah event onChange kepada input-input kita. Pada masa yang sama, mari buat satu fungsi-pemproses umum untuk event ini:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// fungsi-pemproses 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 menerima nombor elemen array yang disunting oleh input ini sebagai parameter pertama.

Berdasarkan nombor ini, kita boleh menggantikan elemen array dengan kandungan input.

Mari lakukan ini:

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

Sekarang mana-mana input boleh disunting, pada masa yang sama array akan berubah secara reaktif dan, seiring dengan itu, jumlah elemennya akan dikira semula.

Mari kumpulkan semua kod kita:

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

Boleh juga dibuat supaya input-input dibentuk dalam gelung:

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

Diberi array berikut:

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

Paparkan purata aritmetik elemen array ini. Dalam gelung, buat input untuk menyunting elemen.