Przetwarzanie danych formularza po kliknięciu przycisku w React

W poprzedniej lekcji robiliśmy tak, aby przy wprowadzaniu znaku do inputa w akapicie natychmiast pojawiał się wynik. To oczywiście wygląda ładnie, ale ma wadę.

Wyobraźmy sobie, że musimy wykonać pewną "ciężką", zasobożerną operację. Nie jest zbyt optymalne robić jej przy każdym wprowadzaniu znaku - lepiej poczekać na ostateczne wprowadzenie danych i wtedy wykonać potrzebną operację raz i wynik wyświetlić w akapicie.

Aby to zrobić, musimy dodać przycisk, po kliknięciu którego będzie wykonywana nasza zasobożerna operacja. W takim przypadku znowu każdemu inputowi będzie odpowiadać jego własny stan, plus jeszcze jeden stan jest nam potrzebny do zapisania wyniku operacji i wyświetlenia go na ekranie.

Spójrzmy na przykład. Niech mamy dwa inputy i przycisk. Po kliknięciu przycisku znajdźmy sumę liczb wprowadzonych do inputów.

Zaimplementujmy:

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

Można użyć wersji skróconej:

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

Dane są dwa inputy, dwa przyciski i akapit. Niech do inputów wprowadzane są liczby. Po kliknięciu na pierwszy przycisk znajdź sumę liczb, a po kliknięciu na drugi przycisk - iloczyn. Wynik wypisz w akapicie.

Dane są dwa inputy, przycisk i akapit. Niech do inputów wprowadzane są daty w formacie 2025-12-31. Po kliknięciu przycisku znajdź różnicę między datami w dniach i wynik wypisz w akapicie.

Zmodyfikuj poprzednie zadanie tak, aby domyślnie w inputach była ustawiona bieżąca data.

Dany jest input i akapit. Do inputa wprowadzana jest liczba. Po utracie fokusu wypisz w akapicie sumę cyfr wprowadzonej liczby.

Dany jest input i akapit. Do inputa wprowadzana jest liczba. Po utracie fokusu wypisz w akapicie iloczyn dzielników wprowadzonej liczby.