Werken met inputs in React

Werken met inputs in React gebeurt met behulp van states. Aan elke input wordt een eigen state toegewezen, die de value van de input bevat.

Laten we naar een voorbeeld kijken. Stel we hebben een input:

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

Stel dat we ook een state hebben:

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

Laten we onze state koppelen aan het value attribuut van de input:

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

In dat geval zal bij het wijzigen van de state, de tekst van de input reactief veranderen.

Dit geeft echter een interessant bijeffect: nu is het onmogelijk om de tekst in de input te veranderen wanneer de code in de browser wordt uitgevoerd! Waarom: omdat bij het invoeren van tekst in de input de state value niet verandert, en bijgevolg de tekst in de input niet zou moeten veranderen.

Probeer het zelf. Kopieer mijn code en voer het bij jezelf uit. Probeer de tekst in de input te veranderen - het zal je niet lukken. Open de browserconsole - je zult daarin een waarschuwing van React zien. Deze waarschuwing geeft aan dat we een state aan de input hebben gekoppeld, maar daarmee de input hebben geblokkeerd.

Laten we ervoor zorgen dat we tekst kunnen invoeren in onze input. Hiervoor moeten we ervoor zorgen dat bij invoer onze state verandert naar de huidige waarde van de input.

Om te beginnen moeten we hiervoor een onChange event aan de input hangen:

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

Dit event gedraagt zich in React anders vergeleken met pure JS. In React wordt het onmiddellijk geactiveerd bij wijziging van de input. Dat wil zeggen bij het invoeren of verwijderen van een teken.

Laten we nu de event handler toevoegen:

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

In deze handler moeten we de huidige tekst van de input lezen en deze in de state zetten met behulp van de functie setValue.

Het probleem is dat this in deze functie niet naar onze input zal wijzen - dat is een eigenschap van React. Om het element te krijgen waarin het event plaatsvond, moeten we event.target gebruiken:

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

Laten we met event.target de huidige tekst van de input tonen:

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

En laten we nu de tekst van de input in onze state opslaan:

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

Nu kunnen we tekst invoeren in de input. Hierbij zal de state value altijd de huidige tekst van de input bevatten.

We kunnen dit gemakkelijk verifiëren. Laten we de inhoud van onze tekst in een paragraaf tonen. In dat geval zal bij het invoeren van tekst in de input de ingevoerde tekst automatisch verschijnen in de paragraaf:

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

We kunnen dit herschrijven naar een compactere variant met een anonieme pijlfunctie:

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

Voor de werking van elke input hebben we het volgende nodig: een state voor deze input creëren, de state koppelen aan het value attribuut van de input, een onChange event aan de input hangen, en in de event handler de state van de input wijzigen naar zijn tekst.

Deze operaties moeten voor elke input worden uitgevoerd. Dat wil zeggen, als je twee inputs hebt, dan heb je twee states en twee event handler functies voor het onChange event.

Maak twee inputs. Laat de tekst van de eerste input verschijnen in de eerste paragraaf, en de tekst van de tweede input - in de tweede paragraaf.