Arbejde med inputs i React

Arbejde med inputs i React foregår ved hjælp af states. Hver input tildeles sin egen state, som indeholder inputets value.

Lad os se på et eksempel. Antag, at vi har et inputfelt:

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

Antag også, at vi har en state:

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

Lad os binde vores state til inputfeltets value attribut:

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

I dette tilfælde vil det betyde, at når staten ændres, vil inputfeltets tekst også reaktivt ændres.

Dette giver dog en interessant bivirkning: nu er det umuligt at ændre teksten i inputfeltet, når koden køres i browseren! Hvorfor: fordi når tekst indtastes i inputfeltet, ændres statens value ikke, og derfor skal teksten i inputfeltet heller ikke ændres.

Prøv det selv. Kopier min kode og kør den hos dig selv. Prøv at ændre teksten i inputfeltet - du vil ikke kunne gøre det. Åbn browserens konsol - du vil se en advarsel fra React der. Denne advarsel fortæller os, at vi har bundet en state til inputfeltet, men derved har blokeret inputfeltet.

Lad os gøre det muligt at indtaste tekst i vores inputfelt. For at gøre dette skal vi sørge for, at vores state ændres til inputfeltets nuværende værdi ved indtastning.

Til at starte med skal vi tilføje en onChange hændelse til inputfeltet:

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

Denne hændelse opfører sig anderledes i React sammenlignet med ren JS. I React udløses den umiddelbart ved ændring af inputfeltet. Det vil sige ved indtastning eller sletning af et tegn.

Lad os nu tilføje vores hændelseshåndterer:

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

I denne håndterer skal vi læse inputfeltets nuværende tekst og indstille den i staten ved hjælp af funktionen setValue.

Problemet er, at this for denne funktion ikke vil pege på vores inputfelt - det er en egenskab ved React. For at få fat på elementet, hvor hændelsen indtraf, er vi nødt til at bruge event.target:

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

Lad os udskrive inputfeltets nuværende tekst ved hjælp af event.target:

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

Og lad os nu skrive inputfeltets tekst ind i vores state:

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

Nu kan vi indtaste tekst i inputfeltet. Samtidig vil staten value altid indeholde inputfeltets nuværende tekst.

Det kan vi let overbevise os om. Lad os udskrive indholdet af vores tekst i et afsnit. I dette tilfælde vil teksten, der indtastes i inputfeltet, automatisk vises i afsnittet:

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

Vi kan omskrive det til en mere kompakt version med en anonym pilfunktion:

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

Således skal vi gøre følgende for at få ethvert inputfelt til at fungere: oprette en state for dette inputfelt, binde staten til inputfeltets value attribut, tilføje en onChange hændelse til inputfeltet, og i hændelseshåndtereren ændre inputfeltets state til dets tekst.

Disse operationer skal udføres for hvert inputfelt. Det vil sige, hvis du har to inputfelter, så vil du have to states og to håndteringsfunktioner for onChange-hændelsen.

Lav to inputfelter. Lad teksten fra det første inputfelt vises i det første afsnit, og teksten fra det andet inputfelt - i det andet afsnit.