Εργασία με inputs στο React

Η εργασία με inputs στο React γίνεται με τη χρήση states. Σε κάθε input ανατίθεται το δικό του state, που περιέχει το value του input.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε ένα input:

function App() {
	return <div>
		<input />
	</div>;
}

Ας υποθέσουμε επίσης ότι έχουμε ένα state:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

Ας δέσμευουμε το state μας στο χαρακτηριστικό value του input:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

Σε αυτήν την περίπτωση, θα συμβεί ότι όταν αλλάζει το state, το κείμενο του input θα αλλάζει αντιδραστικά.

Ωστόσο, αυτό δίνει ένα ενδιαφέρον παρενέργεια: τώρα όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης, είναι αδύνατο να αλλάξετε το κείμενο στο input! Γιατί: επειδή όταν εισάγετε κείμενο στο input δεν αλλάζει το state value, κατά συνέπεια, και το κείμενο στο input δεν πρέπει να αλλάξει.

Δοκιμάστε μόνοι σας. Αντιγράψτε τον κώδικά μου και εκτελέστε τον στον υπολογιστή σας. Προσπαθήστε να αλλάξετε το κείμενο στο input - δεν θα τα καταφέρετε. Ανοίξτε την κονσόλα του προγράμματος περιήγησης - θα δείτε σε αυτήν μια προειδοποίηση από το React. Αυτή η προειδοποίηση μας υποδεικνύει ότι δέσμευσαν ένα state στο input, αλλά με αυτόν τον τρόπο απενεργοποιήσαμε το input.

Ας κάνουμε έτσι ώστε να μπορούμε να εισάγουμε κείμενο στο input μας. Για αυτό πρέπει να κάνουμε έτσι ώστε κατά την εισαγωγή να αλλάζει το state μας στην τρέχουσα τιμή του input.

Αρχικά, για αυτό πρέπει να προσθέσουμε στο input το συμβάν onChange:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Αυτό το συμβάν στο React συμπεριφέρεται διαφορετικά σε σύγκριση με το καθαρό JS. Στο React ενεργοποιείται αμέσως μόλις αλλάξει το input. Δηλαδή κατά την εισαγωγή ή διαγραφή χαρακτήρα.

Ας προσθέσουμε τώρα το χειριστή του συμβάντος μας:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Σε αυτόν τον χειριστή πρέπει να διαβάσουμε το τρέχον κείμενο του input και να το ορίσουμε στο state χρησιμοποιώντας τη συνάρτηση setValue.

Το πρόβλημα είναι ότι το this αυτής της συνάρτησης δεν θα δείχνει στο input μας - αυτή είναι ένα χαρακτηριστικό του React. Για να πάρουμε το στοιχείο, στο οποίο συνέβη το συμβάν, πρέπει να χρησιμοποιήσουμε το event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // σύνδεσμος στο DOM στοιχείο του input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Ας εμφανίσουμε χρησιμοποιώντας το event.target το τρέχον κείμενο του input:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // τρέχον κείμενο input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Και τώρα ας γράψουμε το κείμενο του input στο state μας:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Τώρα μπορούμε να εισάγουμε κείμενο στο input. Σε αυτήν την περίπτωση το state value θα περιέχει πάντα το τρέχον κείμενο του input.

Μπορούμε εύκολα να το διαπιστώσουμε αυτό. Ας εμφανίσουμε το περιεχόμενο του κειμένου μας σε μια παράγραφο. Σε αυτήν την περίπτωση κατά την εισαγωγή κειμένου στο input, το κείμενο που εισάγεται θα εμφανίζεται αυτόματα στην παράγραφο:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>text: {value}</p>
	</div>;
}

Μπορούμε να το ξαναγράψουμε σε μια πιο συμπαγή εκδοχή με ανώνυμη συναρτησιακή έκφραση βέλους:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>text: {value}</p>
	</div>;
}

Έτσι, για τη λειτουργία οποιουδήποτε input χρειαζόμαστε τα ακόλουθα: δημιουργήστε ένα state για αυτό το input, δέσμευσε το state στο χαρακτηριστικό value του input, πρόσθεσε το συμβάν onChange στο input, στον χειριστή του συμβάντος να αλλάζεις το state του input στο κείμενό του.

Αυτές οι λειτουργίες θα πρέπει να πραγματοποιούνται με κάθε input. Δηλαδή, εάν έχετε δύο inputs, τότε θα έχετε δύο states και δύο συναρτήσεις-χειριστές του συμβάντος onChange.

Δημιουργήστε δύο inputs. Ας εμφανίζεται το κείμενο του πρώτου input στην πρώτη παράγραφο, και το κείμενο του δεύτερου input - στη δεύτερη παράγραφο.