Rad sa inputima u React

Rad sa inputima u React se odvija pomoću state-ova. Svakom inputu se dodeljuje njegov state, koji sadrži value inputa.

Pogledajmo na primeru. Recimo da imamo input:

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

Neka takođe imamo state:

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

Hajde da ka atributu value inputa povežemo naš state:

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

U ovom slučaju će se pokazati da pri promeni state-a, reaktivno će se promeniti i tekst inputa.

Ovo, međutim, daje interesantan sporedni efekat: sada pri pokretanju koda u pretraživaču u inputu je nemoguće promeniti tekst! Zašto: zato što se pri unosu teksta u input ne menja state value, shodno tome, ni tekst u inputu ne bi trebalo da se menja.

Probajte sami. Kopirajte moj kod i pokrenite kod sebe. Probajte da menjate tekst u inputu - neće vam uspeti. Otvorite konzolu pretraživača - videćete u njoj upozorenje React-a. Ovo upozorenje nam ukazuje da smo povezali state sa inputom, ali time blokirali input.

Hajde da učinimo tako da u naš input možemo da unosimo tekst. Za to je potrebno da učinimo tako da se pri unosu promeni naš state na trenutnu vrednost inputa.

Za početak, za ovo treba da stavimo na input dogadjaj onChange:

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

Ovaj dogadjaj u React se ponaša drugačije u poređenju sa čistim JS-om. U React on okida se odmah po promeni inputa. To znači pri unosu ili brisanju simbola.

Hajde sada da dodamo obrađivač našeg dogadjaja:

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

U ovom obrađivaču treba da pročitamo trenutni tekst inputa i da ga postavimo u state pomoću funkcije setValue.

Problem je u tome što this ove funkcije neće pokazivati na naš input - takva je osobenost React-a. Da bismo dobili element, u kom se dogodio dogadjaj, neophodno je da koristimo event.target:

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

Ispišimo pomoću event.target trenutni tekst inputa:

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

A sada upišimo tekst inputa u naš state:

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

Sada ćemo moći da unosimo tekst u input. Pri tome state value će uvek sadržati trenutni tekst inputa.

Lako možemo da se uverimo u ovo. Ispišimo sadržaj našeg teksta u paragraf. U ovom slučaju pri unosu teksta u input uneti tekst će automatski da se pojavi u paragrafu:

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

Možemo prepisati na kompaktniju varijantu sa anonimnom streličastom funkcijom:

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

Dakle, za rad bilo kog inputa nama je potrebno sledeće: napraviti state za taj input, povezati state sa atributom value inputa, postaviti dogadjaj onChange na input, u obrađivaču dogadjaja promeniti state inputa na njegov tekst.

Ove operacije će biti potrebno sprovesti sa svakim inputom. To znači, ako imate dva inputa, onda ćete imati dva state-a i dve funkcije-obrađivača dogadjaja onChange.

Napravite dva inputa. Neka se tekst prvog inputa ispisuje u prvi paragraf, a tekst drugog inputa - u drugi paragraf.