Түймө басканда 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 форматында даталар киргизилсин. Түймөнү басканда даталардын ортосундагы айырманы күндөр менен таап, натыйжаны абзацка чыгарыңыз.

Мурунку тапшырманы өзгөртүңүз, инпуттарда демейки абалда учурдагы дата турушун.

Инпут жана абзац берилди. Инпутка сан киргизилет. Фокусту жоготкондо, киргизилген сандын цифраларынын суммасын абзацка чыгарыңыз.

Инпут жана абзац берилди. Инпутка сан киргизилет. Фокусту жоготкондо, киргизилген сандын бөлүүчүлөрүнүн көбөйтүндүсүн абзацка чыгарыңыз.