Σύνδεση πεδίων εισόδου με πίνακα στο React

Ας υποθέσουμε ότι στην κατάσταση notes αποθηκεύεται ένας πίνακας:

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

Ας υποθέσουμε ότι έχουμε επίσης μια βοηθητική συνάρτηση, που βρίσκει το άθροισμα των στοιχείων του πίνακα:

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

function App() {
	...
}

Ας βρούμε και ας εμφανίσουμε το άθροισμα των στοιχείων του πίνακα μας από την κατάσταση, χρησιμοποιώντας για αυτό τη βοηθητική μας συνάρτηση:

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

Ας δημιουργήσουμε τώρα τρία πεδία εισόδου και στο value κάθε πεδίου εισόδου θα γράψουμε ένα από τα στοιχεία του πίνακα:

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

Ας προσθέσουμε τώρα συμβάν onChange στα πεδία εισόδου μας. Ταυτόχρονα, ας δημιουργήσουμε μία κοινή συνάρτηση-χειριστή αυτού του συμβάντος:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// κοινή συνάρτηση-χειριστής
	}
	
	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>;
}

Όπως βλέπετε, η συνάρτηση changeHandler ως πρώτη παράμετρο δέχεται τον αριθμό του στοιχείου του πίνακα που επεξεργάζεται αυτό το πεδίο εισόδου.

Με βάση αυτόν τον αριθμό μπορούμε να αντικαταστήσουμε το στοιχείο του πίνακα με το περιεχόμενο του πεδίου εισόδου.

Ας το κάνουμε αυτό:

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

Τώρα θα είναι δυνατή η επεξεργασία οποιουδήποτε πεδίου εισόδου, ενώ ταυτόχρονα ο πίνακας θα αλλάζει αντιδραστικά και, κατά συνέπεια, θα υπολογίζεται ξανά το άθροισμα των στοιχείων του.

Ας συγκεντρώσουμε όλο τον κώδικά μας μαζί:

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

Μπορούμε να τα κάνουμε έτσι, ώστε τα πεδία εισόδου να δημιουργούνται σε βρόχο:

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

Δίνεται ο ακόλουθος πίνακας:

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

Εμφανίστε στην οθόνη τον αριθμητικό μέσο των στοιχείων αυτού του πίνακα. Σε βρόχο δημιουργήστε πεδία εισόδου για την επεξεργασία των στοιχείων.