Gegevens van formulier verwerken bij het klikken op een knop in React

In de vorige les hebben we ervoor gezorgd dat bij het invoeren van een teken in een invoerveld onmiddellijk het resultaat in een paragraaf verscheen. Dat ziet er uiteraard mooi uit, maar heeft een nadeel.

Stel je voor dat we een "zware", resource-intensieve operatie moeten uitvoeren. Het is niet erg optimaal om dit bij elke invoer van een teken te doen - het is beter om te wachten tot de gegevens volledig zijn ingevoerd en dan de benodigde operatie één keer uit te voeren en het resultaat in een paragraaf weer te geven.

Hiervoor moeten we een knop introduceren, waar bij het klikken op onze resource-intensieve operatie wordt uitgevoerd. In dat geval heeft elk invoerveld weer zijn eigen state, plus we hebben nog een state nodig om het resultaat van de operatie op te slaan en het op het scherm weer te geven.

Laten we naar een voorbeeld kijken. Stel we hebben twee invoervelden en een knop. Laten we bij het klikken op de knop de som vinden van de getallen die in de invoervelden zijn ingevoerd.

Laten we het implementeren:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	function handleChange1(event) {
		setValue1(event.target.value);
	}
	
	function handleChange2(event) {
		setValue2(event.target.value);
	}
	
	function handleClick() {
		setResult(Number(value1) + Number(value2));
	}
	
	return <div>
		<input value={value1} onChange={handleChange1} />
		<input value={value2} onChange={handleChange2} />
		
		<button onClick={handleClick}>btn</button>
		<p>result: {result}</p>
	</div>;
}

Je kunt de verkorte versie gebruiken:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	return <div>
		<input value={value1} onChange={event => setValue1(event.target.value)} />
		<input value={value2} onChange={event => setValue2(event.target.value)} />
		
		<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
		<p>result: {result}</p>
	</div>;
}

Er zijn twee invoervelden, twee knoppen en een paragraaf. Laat er getallen in de invoervelden worden ingevoerd. Door op de eerste knop te klikken vindt u de som van de getallen, en door op de tweede knop te klikken - het product. Geef het resultaat weer in de paragraaf.

Er zijn twee invoervelden, een knop en een paragraaf. Laat in de invoervelden datums worden ingevoerd in het formaat 2025-12-31. Vind bij het klikken op de knop het verschil tussen de datums in dagen en geef het resultaat weer in de paragraaf.

Wijzig de vorige opdracht zo dat standaard in de invoervelden de huidige datum staat.

Er is een invoerveld en een paragraaf. In het invoerveld wordt een getal ingevoerd. Bij het verlies van focus, geef in de paragraaf de som van de cijfers van het ingevoerde getal weer.

Er is een invoerveld en een paragraaf. In het invoerveld wordt een getal ingevoerd. Bij het verlies van focus, geef in de paragraaf het product van de delers van het ingevoerde getal weer.