Lucrul cu input-uri în React

Lucrul cu input-uri în React se face cu ajutorul stărilor. Fiecărui input i se atribuie propria sa stare, care conține value input-ului.

Să ne uităm la un exemplu. Să presupunem că avem un input:

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

Să presupunem, de asemenea, că avem o stare:

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

Să legăm starea noastră la atributul value input-ului:

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

În acest caz, se va întâmpla ca la modificarea stării, textul input-ului să se schimbe reactiv.

Aceasta, totuși, dă un efect secundar interesant: acum, când rulezi codul în browser, este imposibil să schimbi textul în input! De ce: pentru că la introducerea textului în input nu se schimbă starea value, în consecință, nici textul din input nu ar trebui să se schimbe.

Încearcă tu însuți. Copiază-mi codul și rulează-l la tine. Încearcă să modifici textul în input - nu vei reuși nimic. Deschide consola browser-ului - vei vedea în ea o avertizare de la React. Această avertizare ne indică faptul că am legat o stare la input, dar astfel am blocat input-ul.

Să facem astfel încât în input-ul nostru să putem introduce text. Pentru aceasta trebuie să facem așa încât la introducere să se modifice starea noastră la valoarea curentă a input-ului.

Pentru început, pentru aceasta trebuie să atașăm la input evenimentul onChange:

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

Acest eveniment în React se comportă diferit față de JS simplu. În React el se declanșează imediat la modificarea input-ului. Adică la introducerea sau ștergerea unui caracter.

Să adăugăm acum handler-ul evenimentului nostru:

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

În acest handler trebuie să citim textul curent al input-ului și să îl setăm în stare cu ajutorul funcției setValue.

Problema este că this acestei funcții nu va indica către input-ul nostru - aceasta este o particularitate a React. Pentru a obține elementul în care s-a produs evenimentul, trebuie să folosim event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // referință la elementul DOM al input-ului
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Să afișăm cu ajutorul event.target textul curent al input-ului:

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

Și acum să scriem textul input-ului în starea noastră:

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

Acum vom putea introduce text în input. În același timp starea value va conține întotdeauna textul curent al input-ului.

Putem să ne convingem ușor de acest lucru. Să afișăm conținutul textului nostru într-un paragraf. În acest caz, la introducerea textului în input, textul introdus va apărea automat în paragraf:

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

Putem rescrie într-o variantă mai compactă cu o funcție arrow anonimă:

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

Astfel, pentru funcționarea oricărui input avem nevoie de următoarele: să creăm o stare pentru acel input, să legăm starea la atributul value input-ului, să atașăm evenimentul onChange la input, în handler-ul evenimentului să modificăm starea input-ului la textul său.

Aceste operații vor trebui efectuate pentru fiecare input. Adică, dacă ai două input-uri, atunci vei avea două stări și două funcții-handler ale evenimentului onChange.

Creează două input-uri. Fie ca textul primului input să se afișeze în primul paragraf, iar textul celui de-al doilea input - în al doilea paragraf.