Χρήση του useRef Hook για DOM στο React

Σε ένα από τα προηγούμενα μαθήματα αναφέραμε, ότι τα refs χρησιμοποιούνται πιο συχνά για πρόσβαση σε στοιχεία DOM.

Τα refs θα έρθουν σε βοήθεια όταν, για παράδειγμα, χρειαστεί να εστιάσετε σε ένα στοιχείο, να κάνετε κύλιση ή να υπολογίσετε το μέγεθός του και τη θέση του, ή ίσως να χρησιμοποιήσετε ορισμένες από τις μεθόδους ή τις ιδιότητές του, αφού για τέτοια πράγματα δεν υπάρχουν ενσωματωμένες μέθοδοι στο React.

Ας δούμε σε ένα παράδειγμα με input, πώς γίνεται αυτό. Ας δημιουργήσουμε ένα component με input και ένα κουμπί:

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

Αρχικά, ας εισάγουμε στο component useRef:

import { useRef } from 'react';

Και ας δημιουργήσουμε ένα ref ref στο component. Ας το αρχικοποιήσουμε με την τιμή null:

const ref = useRef(null);

Ας προσθέσουμε στο κουμπί έναν χειριστή κλικ:

<button onClick={handleClick}>focus</button>

Για να έχουμε πρόσβαση στο input, ας γράψουμε το ref ref μας στο χαρακτηριστικό ref του input. Έτσι, όταν το React δημιουργεί τον DOM κόμβο για αυτό το input, θα τοποθετήσει μια αναφορά σ' αυτόν στο ref.current και θα μπορούμε να χρησιμοποιούμε τις μεθόδους του input:

<input ref={ref} />

Και τελικά, ας προσθέσουμε τη συνάρτηση χειρισμού κλικ, ώστε όταν γίνει κλικ στο κουμπί, στο input να εστιάζεται. Τώρα μπορούμε να το κάνουμε αυτό μέσω του ref, στον οποίο βρίσκεται η αναφορά στο input μας, προσπελάζοντας τη μέθοδό του focus:

function handleClick() {
	ref.current.focus();
}

Πατήστε το κουμπί και βεβαιωθείτε ότι εστιάζεται στο input.

Πάρτε τον κώδικα του component App, που γράψαμε σε αυτό το μάθημα και κάντε το έτσι ώστε με το κλικ στο κουμπί στο input, εκτός από την εστίαση, να γίνεται και εκκαθάριση του πεδίου εισαγωγής. Χρησιμοποιήστε για αυτό την ιδιότητα value του input.