Arbeid med inputs i React

Arbeid med inputs i React skjer ved hjelp av tilstander. Hver input tildeles sin egen tilstand, som inneholder inputets value.

La oss se på et eksempel. La oss si at vi har en input:

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

La oss også si at vi har en tilstand:

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

La oss knytte tilstanden vår til inputens value-attributt:

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

I dette tilfellet vil det bety at når tilstanden endres, vil input-teksten endres reaktivt.

Dette gir imidlertid en interessant bivirkning: når koden kjøres i nettleseren, er det umulig å endre teksten i input! Hvorfor: fordi når tekst skrives inn i input, endres ikke tilstanden value, og følgelig skal ikke teksten i input endres.

Prøv selv. Kopier koden min og kjør den hos deg. Prøv å endre teksten i input - du vil ikke klare det. Åpne nettleserens konsoll - du vil se en advarsel fra React der. Denne advarselen indikerer at vi har knyttet en tilstand til input, men dermed har låst input.

La oss gjøre slik at vi kan skrive tekst inn i input. For å gjøre dette må vi sørge for at når det skrives inn, endres tilstanden vår til inputens nåværende verdi.

Til å begynne med må vi legge til en hendelse onChange på input:

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

Denne hendelsen i React oppfører seg annerledes sammenlignet med vanlig JS. I React utløses den umiddelbart ved endring av input. Det vil si ved innskriving eller sletting av et tegn.

La oss nå legge til behandleren for hendelsen vår:

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

I denne behandleren må vi lese inputens nåværende tekst og sette den i tilstanden ved hjelp av funksjonen setValue.

Problemet er at this for denne funksjonen ikke vil peke på input vår - det er en egenskap ved React. For å få tak i elementet der hendelsen inntraff, må vi bruke event.target:

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

La oss skrive ut inputens nåværende tekst ved hjelp av event.target:

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

Og nå skal vi skrive input-teksten inn i tilstanden vår:

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

Nå kan vi skrive tekst inn i input. Ved det vil tilstanden value alltid inneholde inputens nåværende tekst.

Vi kan enkelt overbevise oss om dette. La oss skrive ut innholdet av teksten vår i et avsnitt. I dette tilfellet vil når tekst skrives inn i input, den innskrevne teksten automatisk vises i avsnittet:

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 til en mer kompakt variant med en anonym pilfunksjon:

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

For at enhver input skal fungere, trenger vi derfor følgende: opprette en tilstand for denne input, knytte tilstanden til inputens value-attributt, legge til onChange-hendelsen på input, i hendelsesbehandleren endre input-tilstanden til dens tekst.

Disse operasjonene må utføres for hver input. Det vil si, hvis du har to inputs, vil du ha to tilstander og to funksjonsbehandlere for onChange-hendelsen.

Lag to inputs. La teksten fra den første input vises i det første avsnittet, og teksten fra den andre input - i det andre avsnittet.