Binding von Inputs an ein Array in React

Angenommen, im State notes ist ein Array gespeichert:

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

Angenommen, wir haben auch eine Hilfsfunktion, die die Summe der Array-Elemente berechnet:

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

function App() {
	...
}

Lassen Sie uns die Summe der Elemente unseres Arrays aus dem State berechnen und ausgeben, indem wir unsere Hilfsfunktion verwenden:

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

Lassen Sie uns nun drei Inputs erstellen und in value jedes Inputs eines der Elemente des Arrays eintragen:

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

Fügen wir nun den Inputs ein onChange-Event hinzu. Dabei erstellen wir eine gemeinsame Handler-Funktion für dieses Event:

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

Wie Sie sehen, erhält die Funktion changeHandler als ersten Parameter die Nummer des Array-Elements, das dieser Input bearbeitet.

Anhand dieser Nummer können wir das Element des Arrays durch den Inhalt des Inputs ersetzen.

Setzen wir das um:

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

Nun kann jeder Input bearbeitet werden, wodurch das Array reaktiv geändert wird und folglich die Summe seiner Elemente neu berechnet wird.

Fassen wir unseren gesamten Code zusammen:

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

Man kann es so einrichten, dass die Inputs in einer Schleife erzeugt werden:

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

Gegeben ist das folgende Array:

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

Geben Sie den Durchschnittswert der Elemente dieses Arrays auf dem Bildschirm aus. Erstellen Sie in einer Schleife Inputs zur Bearbeitung der Elemente.