Syöttökenttien käsittely Reactissa

Syöttökenttien käsittely Reactissa tapahtuu tilan avulla. Jokaiselle syöttökentälle määritetään oma tila, joka sisältää syöttökentän value-arvon.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on syöttökenttä:

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

Oletetaan myös, että meillä on tila:

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

Sidotaanpa tilamme syöttökentän value-attribuuttiin:

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

Tällöin käy niin, että kun tilaa muutetaan, syöttökentän teksti muuttuu reaktiivisesti.

Tämä kuitenkin aiheuttaa mielenkiintoisen sivuvaikutuksen: nyt koodia selaimessa suoritettaessa syöttökentän tekstin muuttaminen on mahdotonta! Syy: koska kun tekstiä syötetään kenttään, tilaa value ei muuteta, vastaavasti syöttökentän tekstin ei pitäisi muuttua.

Kokeile itse. Kopioi koodini ja suorita se omassa ympäristössäsi. Yritä muuttaa tekstiä syöttökentässä - et onnistu. Avaa selaimen konsoli - näet siellä Reactin varoituksen. Tämä varoitus kertoo meille, että olemme sitoneet tilan syöttökenttään, mutta samalla sitä estäneet.

Tehdään niin, että syöttökenttään voidaan kirjoittaa tekstiä. Tätä varten tulee tehdä niin, että kirjoitettaessa tilamme muuttuu syöttökentän nykyiseksi arvoksi.

Aluksi tätä varten tulee asettaa syöttökentälle tapahtuma onChange:

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

Tämä tapahtuma Reactissa käyttäytyy eri tavalla verrattuna puhdas JS:ään. Reactissa se laukaisee välittömästi syöttökentän muuttuessa. Eli kun merkkiä syötetään tai poistetaan.

Lisätään nyt tapahtumamme käsittelijä:

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

Tässä käsittelijässä meidän tulee lukea nykyinen syöttökentän teksti ja asettaa se tilaan funktion setValue avulla.

Ongelma on, että this tämän funktion ei osoita syöttökenttäämme - tämä on Reactin erikoisuus. Saadaksemme elementin, jossa tapahtuma tapahtui, meidän on käytettävä event.target:tä:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // linkki syöttökentän DOM-elementtiin
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Esitetään event.target:n avulla nykyinen syöttökentän teksti:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // syöttökentän nykyinen teksti
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Kirjoitetaan nyt syöttökentän teksti tilaan:

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

Nyt pystymme syöttämään tekstiä kenttään. Samalla tila value sisältää aina syöttökentän nykyisen tekstin.

Voimme helposti varmistua tästä. Esitetään sisältö tekstimme kappaleessa. Tällöin kun tekstiä syötetään kenttään, syötetty teksti ilmestyy automaattisesti kappaleeseen:

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

Voimme kirjoittaa sen uudelleen tiiviimmässä muodossa anonyymillä nuolifunktiolla:

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

Siis minkä tahansa syöttökentän toimimiseksi tarvitsemme seuraavan: luoda tila tälle syöttökentälle, sitoa tila syöttökentän value-attribuuttiin, asettaa tapahtuma onChange syöttökentälle, tapahtuman käsittelijässä muuttaa syöttökentän tilaa sen tekstiksi.

Nämä toimenpiteet on suoritettava jokaiselle syöttökentälle. Eli jos sinulla on kaksi syöttökenttää, sinulla on kaksi tilaa ja kaksi tapahtumankäsittelijäfunktiota tapahtumalle onChange.

Tee kaksi syöttökenttää. Ensimmäisen syöttökentän teksti tulostukoon ensimmäiseen kappaleeseen, ja toisen syöttökentän teksti toiseen kappaleeseen.