Tugmani bosish orqali React-da shakl ma'lumotlarini qayta ishlash
Oldingi darsda biz inputga belgi kiritilganda abzatsda natija darhol paydo bo'lishini qildik. Bu, albatta, chiroyli ko'rinadi, lekin kamchiligi bor.
Tasavvur qilaylik, biz "og'ir", resurs talab qiladigan amalni bajarishimiz kerak. Har bir belgi kiritilganda uni bajarish unchalik optimal emas - ma'lumotlarning yakuniy kiritilishini kutib, keyin kerakli amalni bir marta bajarish va natijani abzatsda chiqarish yaxshiroqdir.
Buning uchun biz tugmani kiritishimiz kerak, bosilganda bizning resurs talab qiladigan operatsiyamiz bajariladi. Bunday holda, yana har bir input o'zining holatiga (state) ega bo'ladi, va yana bir holat natijani yozish va uni ekranda ko'rsatish uchun kerak bo'ladi.
Keling, misolni ko'rib chiqaylik. Aytaylik, bizda ikkita input va tugma bor. Tugmani bosish orqali keling, inputlarga kiritilgan raqamlar yig'indisini topaylik.
Amalga oshiramiz:
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>;
}
Qisqartirilgan variantdan foydalanish mumkin:
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>;
}
Ikkita input, ikkita tugma va abzat berilgan. Inputlarga raqamlar kiritilsin. Birinchi tugmani bosish orqali raqamlar yig'indisini toping, ikkinchi tugmani bosish orqali - ko'paytmasini toping. Natijani abzatsda chiqaring.
Ikkita input, tugma va abzat berilgan. Inputlarga sana 2025-12-31 formatida kiritilsin. Tugmani bosish orqali sanalar orasidagi farqni kunlarda toping va natijani abzatsda chiqaring.
Oldingi vazifani inputlarda sukut bo'yicha joriy sana turishi uchun o'zgartiring.
Input va abzat berilgan. Inputga raqam kiritiladi. Fokus yo'qotilganda abzatsga kiritilgan raqamning raqamlari yig'indisini chiqaring.
Input va abzat berilgan. Inputga raqam kiritiladi. Fokus yo'qotilganda abzatsga kiritilgan raqamning bo'luvchilari ko'paytmasini chiqaring.
