Delo z vnosi v Reactu

Delo z vnosi v Reactu poteka s pomočjo stanj. Vsak vnos dobi svoje stanje, ki vsebuje value vnosa.

Poglejmo si primer. Recimo, da imamo vnos:

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

Recimo tudi, da imamo stanje:

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

Povežimo naše stanje z atributom value vnosa:

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

V tem primeru se bo zgodilo naslednje: ko se spremeni stanje, se bo reaktivno spremenilo tudi besedilo vnosa.

Vendar to povzroči zanimiv stranski učinek: zdaj, ko zaženemo kodo v brskalniku, je v vnosu nemogoče spremeniti besedilo! Zakaj: ker se ob vnosu besedila v vnos ne spremeni stanje value, torej se besedilo v vnosu ne sme spremeniti.

Preizkusite sami. Kopirajte mojo kodo in zaženite pri sebi. Poskusite spreminjati besedilo v vnosu - ne bo vam uspelo. Odprite konzolo brskalnika - videli boste opozorilo React. To opozorilo nam nakazuje, da smo povezali stanje z vnosom, vendar smo s tem blokirali vnos.

Naredimo tako, da lahko v naš vnos vnašamo besedilo. Za to moramo narediti tako, da se ob vnosu spremeni naše stanje na trenutno vrednost vnosa.

Za začetek moramo na vnos obesiti dogodek onChange:

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

Ta dogodek se v Reactu obnaša drugače v primerjavi s čistim JS. V Reactu se sproži takoj ob spremembi vnosa. To pomeni ob vnosu ali brisanju znaka.

Sedaj dodajmo obravnavalec našega dogodka:

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

V tem obravnavalcu moramo prebrati trenutno besedilo vnosa in ga nastaviti v stanje s pomočjo funkcije setValue.

Težava je v tem, da this te funkcije ne bo kazal na naš vnos - to je posebnost Reacta. Da dobimo element, v katerem se je zgodil dogodek, moramo uporabiti event.target:

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

Izpišimo s pomočjo event.target trenutno besedilo vnosa:

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

In zdaj zapišimo besedilo vnosa v naše stanje:

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

Zdaj lahko vnašamo besedilo v vnos. Pri tem bo stanje value vedno vsebovalo trenutno besedilo vnosa.

O tem se lahko prepričamo z lahkoto. Izpišimo vsebino našega besedila v odstavek. V tem primeru bo ob vnosu besedila v vnos, vnešeno besedilo avtomatično pojavilo v odstavku:

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

Lahko prepišemo v bolj kompakteno različico z anonimno funkcijo s puščico:

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

Torej, za delovanje katerega koli vnosa potrebujemo naslednje: ustvariti stanje za ta vnos, povezati stanje z atributom value vnosa, obesiti dogodek onChange na vnos, v obravnavalcu dogodka spremeniti stanje vnosa na njegovo besedilo.

Te operacije je treba izvajati z vsakim vnosom. To pomeni, če imate dva vnosa, boste imeli dve stanji in dve funkciji-obravnavalca dogodka onChange.

Naredite dva vnosa. Naj se besedilo prvega vnosa izpiše v prvi odstavek, besedilo drugega vnosa pa v drugi odstavek.