Práca so vstupmi v React

Práca so vstupmi v React prebieha pomocou stavov. Každému vstupu je priradený vlastný stav, ktorý obsahuje jeho value.

Pozrime sa na príklad. Predpokladajme, že máme vstup:

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

Predpokladajme tiež, že máme stav:

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

Pripojme náš stav k atribútu value vstupu:

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

V takom prípade to znamená, že pri zmene stavu sa reaktívne zmení aj text vstupu.

To však má zaujímavý vedľajší efekt: teraz pri spustení kódu v prehliadači nie je možné zmeniť text vo vstupe! Prečo: pretože pri zadávaní textu do vstupu sa nemení stav value, a teda by sa text vo vstupe nemal meniť.

Vyskúšajte si to sami. Skopírujte môj kód a spustite si ho. Skúste meniť text vo vstupe - nič sa vám nepodarí. Otvorte konzolu prehliadača - uvidíte v nej varovanie React. Toto varovanie nám naznačuje, že sme pripojili stav k vstupu, ale tým sme zablokovali vstup.

Urobme to tak, aby bolo možné do nášho vstupu zadávať text. Na to je potrebné zabezpečiť, aby sa pri zadávaní menil náš stav na aktuálnu hodnotu vstupu.

Na začiatok je potrebné na vstup pripojiť udalosť onChange:

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

Táto udalosť v React sa správa inak v porovnaní s čistým JS. V React sa spúšťa okamžite po zmene vstupu. To znamená pri zadávaní alebo odstraňovaní symbolu.

Pridajme teraz obsluhu našej udalosti:

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

V tejto obsluhe musíme prečítať aktuálny text vstupu a nastaviť ho do stavu pomocou funkcie setValue.

Problém je v tom, že this tejto funkcie nebude ukazovať na náš vstup - to je zvláštnosť React. Ak chceme získať prvok, v ktorom sa udalosť stala, musíme použiť event.target:

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

Vypíšme pomocou event.target aktuálny text vstupu:

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

A teraz zapíšme text vstupu do nášho stavu:

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

Teraz budeme môcť zadávať text do vstupu. Pri tom stav value bude vždy obsahovať aktuálny text vstupu.

Môžeme sa o tom ľahko presvedčiť. Vypíšme obsah nášho textu do odseku. V tomto prípade pri zadávaní textu do vstupu sa zadaný text automaticky objaví v odseku:

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

Môžeme to prepísať na kompaktnejšiu verziu s anonymnou funkciou so šípkou:

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

Pre prácu s akýmkoľvek vstupom teda potrebujeme nasledovné: vytvoriť stav pre tento vstup, pripojiť stav k atribútu value vstupu, pripojiť udalosť onChange na vstup, v obsluhe udalosti meniť stav vstupu na jeho text.

Tieto operácie je potrebné vykonať pre každý vstup. To znamená, že ak máte dva vstupy, budete mať dva stavy a dve funkcie na obsluhu udalosti onChange.

Vytvorte dva vstupy. Nech text prvého vstupu sa vypíše do prvého odseku a text druhého vstupu - do druhého odseku.