Обрађивање података форме кликом на дугме у React-у

У претходној лекцији смо радили тако да при уносу симбола у поље за унос у параграфу тренутно појави резултат. То, наравно, изгледа лепо, али има недостатак.

Замислимо да треба да урадимо неку "тешку", ресурсно захтевну операцију. Није баш оптимално радити је на сваки унос симбола - боље је сачекати коначни унос података и онда извршити потребну операцију једном и резултат приказати у параграфу.

За то нам треба дугме, при клику на које ће се извршавати наша ресурсно захтевна операција. У том случају ћемо опет имати да сваком пољу за унос одговара његово стање (state), плус нам је потребно још једно стање за снимање резултата операције и приказ њега на екран.

Погледајмо на примеру. Нека имамо два поља за унос и једно дугме. При клику на дугме хајде да пронађемо збир бројева, унетих у поља за унос.

Реализујмо:

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

Може се користити скраћена варијанта:

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

Дата су два поља за унос, два дугмета и параграф. Нека се у поља за унос уносе бројеви. При клику на прво дугме пронађите збир бројева, а при клику на друго дугме - производ. Резултат испишите у параграф.

Дата су два поља за унос, дугме и параграф. Нека се у поља за унос уносе датуми у формату 2025-12-31. При клику на дугме пронађите разлику између датума у данима и резултат испишите у параграф.

Модификујте претходни задатак тако да подразумевано у пољима за унос стоји тренутни датум.

Дато је поље за унос и параграф. У поље за унос уноси се број. При губитку фокуса испишите у параграф збир цифара унесеног броја.

Дато је поље за унос и параграф. У поље за унос уноси се број. При губитку фокуса испишите у параграф производ делилаца унесеног броја.