ფორმის მონაცემების დამუშავება ღილაკზე დაჭერით React-ში

წინა გაკვეთილში ჩვენ ვაკეთებდით ისე, რომ ინპუტში სიმბოლოს შეყვანისას აბზაცში მყისიერად გამოჩნდეს შედეგი. ეს, რა თქმა უნდა, ლამაზად გამოიყურება, მაგრამ აქვს ნაკლი.

წარმოვიდგინოთ, რომ ჩვენ გვჭირდება რაიმე "მძიმე", რესურსომოთხოვნიანი ოპერაციის შესრულება. არ არის ძალიან ოპტიმალური მისი შესრულება ყოველ სიმბოლოს შეყვანაზე - უკეთესია დაველოდოთ მონაცემების საბოლოო შეყვანის დასრულებას და შემდეგ ერთხელ შევასრულოთ საჭირო ოპერაცია და შედეგი გამოვიტანოთ აბზაცში.

ამისთვის ჩვენ უნდა შემ�იტანოთ ღილაკი, რომლის დაჭერაზეც განხორციელდება ჩვენი რესურსომოთხოვნიანი ოპერაცია. ამ შემთხვევაში ჩვენ კვლავ თითოეულ ინპუტს შეესაბამება საკუთარი სტეიტი, პლუს კიდევ ერთი სტეიტი გვჭირდება ოპერაციის შედეგის ჩასაწერად და ეკრანზე გამოსატანად.

შევხედოთ მაგალითს. მოდით, გვაქვს ორი ინპუტი და ღილაკი. ღილაკზე დაჭერით მოდით ვიპოვოთ ინპუტებში შეყვანილი რიცხვების ჯამი.

განვახორციელოთ:

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. ღილაკზე დაჭერით იპოვეთ განსხვავება თარიღებს შორის დღეებში და შედეგი გამოიტანეთ აბზაცში.

შეცვალეთ წინა ამოცანა ისე, რომ სტანდარტულად ინპუტებში იყოს მიმდინარე თარიღი.

მოცემულია ინპუტი და აბზაცი. ინპუტში შეყვანილია რიცხვი. ფოკუსის დაკარგვაზე გამოიტანეთ აბზაცში შეყვანილი რიცხვის ციფრების ჯამი.

მოცემულია ინპუტი და აბზაცი. ინპუტში შეყვანილია რიცხვი. ფოკუსის დაკარგვაზე გამოიტანეთ აბზაცში შეყვანილი რიცხვის გამყოფების ნამრავლი.