Тугмани босганда React форма маълумотларини ишлов бериш
Олдинги дарсда биз инпутга белги киритганда абзацда натижа дарҳол пайдо бўлишини таъминладик. Бу, албатта, чиройли кўринади, лекин камчиликлари бор.
Tасаввур килайлик, биз бирор "огʻир", ресурс талab қилувчи операцияни бажаришимиз керак. Ҳар бир белги киритилганда уни бажариш жуда оптимал эмас - маълумотларнинг якуний киритилишини кутиб, сўнгра керакли операцияни бир марта бажариб, натижани абзацда чиқариш яхшироқ бўлар эди.
Бунинг учун биз тугмани киритишимиз керак, уни босганда бизнинг ресурс талаб қилувчи операциямиз амалга оширилади. Бунда яна ҳар бир инпут ўз стейтига эга бўлади, плюс яна бир стейт операция натижасини ёзиш ва уни экранда кўрсатиш учун керак бўлади.
Мисолда кўрамиз. Иккита инпут ва тугма бор дейлик. Тугмани босганда инпутларга киритилган сонларнинг йиғиндисини топажак.
Амалга оширамиз:
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>;
}
Иккита инпут, иккита тугма ва абзац берилган. Инпутларга сонлар киритилсин. Биринчи тугмани босганда сонларнинг йиғиндисини, иккинчи тугмани босганда эса кўпайтмасини топинг. Натижани абзацда чиқаринг.
Иккита инпут, тугма ва абзац берилган. Инпутларга санa 2025-12-31 форматида киритилсин. Тугмани босганда санaлар ўртасидаги фарқни кунларда топинг ва натижани абзацда чиқаринг.
Олдинги масалани шундай модификация қилингки, инпутларда сустдаги холда жорий санa турсин.
Инпут ва абзац берилган. Инпутга сон киритилади. Фокус йўқотилганда киритилган соннинг рақамлари йиғиндисини абзацда чиқаринг.
Инпут ва абзац берилган. Инпутга сон киритилади. Фокус йўқотилганда киритилган соннинг бўлувчилари кўпайтмасини абзацда чиқаринг.
