Inputs binden aan een array in React

Stel dat in de state notes een array wordt opgeslagen:

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

Stel dat we ook een hulpfunctie hebben, die de som van de array-elementen vindt:

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

function App() {
	...
}

Laten we de som van de elementen van onze array uit de state vinden en weergeven, door gebruik te maken van onze hulpfunctie:

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

Laten we nu drie inputs maken en in value van elke input een van de array-elementen zetten:

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

Laten we nu een onChange gebeurtenis toevoegen aan onze inputs. Laten we hierbij één algemene handler-functie voor deze gebeurtenis maken:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// algemene handler-functie
	}
	
	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>;
}

Zoals je ziet, accepteert de functie changeHandler als eerste parameter het nummer van dat array-element dat door deze input wordt bewerkt.

Aan de hand van dit nummer kunnen we het element van de array vervangen door de inhoud van de input.

Laten we dit doen:

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

Nu kan elke input worden bewerkt, waarbij de array reactief zal veranderen en dienovereenkomstig de som van zijn elementen opnieuw wordt berekend.

Laten we al onze code samenvoegen:

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

Het is mogelijk om te regelen dat de inputs in een lus worden gegenereerd:

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

Gegeven de volgende array:

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

Toon het rekenkundig gemiddelde van de elementen van deze array op het scherm. Maak in een lus inputs voor het bewerken van de elementen.