React hodisalari: onClick va onChange

Ro’yxat chizish darsida ma’lumotni ekranga chiqardik, lekin sahifa jonsiz: tugmalar hech nima qilmaydi. Endi foydalanuvchi amallariga javob berishni o’rganamiz.

onClick — birinchi hodisa

Hodisalar darsida addEventListener bilan ishlagansiz. React’da ishlovchi to’g’ridan-to’g’ri JSX’da beriladi:

function Greeting() {
  function handleClick() {
    alert("Tugma bosildi!");
  }

  return (
    <button type="button" onClick={handleClick}>
      Bosing
    </button>
  );
}

export default Greeting;

Brauzerda tugmani bosing — oyna chiqadi.

Ikki tomonni solishtiring:

Amal	Oddiy JavaScript	React
Element topish	`querySelector` kerak	Kerak emas
Ulash	`addEventListener("click", fn)`	`onClick={fn}`
Uzish	`removeEventListener`	Avtomatik
Nomi	`click`, `change`	`onClick`, `onChange`

React hodisa nomlarini camelCase yozadi va on bilan boshlaydi: onClick, onChange, onSubmit, onKeyDown, onMouseEnter.

Ishlovchini uzish haqida o’ylamaysiz — element ekrandan ketganda React o’zi tozalaydi.

Eng ko’p uchraydigan xato: qavs qo’yish

Bu xatoni deyarli har bir boshlovchi bir marta qiladi:

// ❌ Noto'g'ri — qavs bor
<button type="button" onClick={handleClick()}>Bosing</button>

// ✅ To'g'ri — qavs yo'q
<button type="button" onClick={handleClick}>Bosing</button>

Farq bitta juft qavsda, lekin ma’nosi butunlay boshqa.

onClick={handleClick} — funksiyaning o’zini uzatasiz. React uni saqlab qo’yadi va tugma bosilganda chaqiradi.

onClick={handleClick()} — funksiyani chaqirasiz va uning natijasini uzatasiz. Chaqiruv komponent chizilayotgan paytda, tugma bosilishidan oldin bo’lib o’tadi.

Qoidani shunday eslang: onClick ga ism beriladi, buyruq emas.

Hodisa obyekti

Ishlovchi chaqirilganda React unga hodisa haqidagi ma’lumotni beradi:

function SearchBox() {
  function handleChange(e) {
    console.log("Kiritilgan matn:", e.target.value);
  }

  return <input type="text" onChange={handleChange} placeholder="Qidirish" />;
}

export default SearchBox;

Maydonga “kitob” deb yozsangiz, konsolda har harf uchun bitta qator chiqadi:

Kiritilgan matn: k
Kiritilgan matn: ki
Kiritilgan matn: kit
Kiritilgan matn: kito
Kiritilgan matn: kitob

onChange React’da har bosilgan tugmada ishlaydi — oddiy HTML’dagi change hodisasidan farqi shu (u maydondan chiqilganda ishlardi).

Eng ko’p ishlatiladigan maydonlar:

Xossa	Nima beradi
`e.target`	Hodisa sodir bo’lgan element
`e.target.value`	Maydonga kiritilgan qiymat
`e.target.checked`	Checkbox belgilanganmi
`e.preventDefault()`	Brauzerning standart amalini to’xtatadi
`e.key`	Bosilgan tugma nomi (`"Enter"`, `"Escape"`)

Argument uzatish

Ishlovchiga qo’shimcha qiymat berish kerak bo’ladi — masalan qaysi vazifa o’chirilayotganini. Lekin qavs qo’yib bo’lmaydi:

// ❌ Chizish paytida chaqiriladi
<button onClick={handleDelete(task.id)}>O'chirish</button>

Yechim — arrow funksiya bilan o’rash:

// ✅ To'g'ri
<button type="button" onClick={() => handleDelete(task.id)}>
  O'chirish
</button>

Endi onClick ga arrow funksiya tushadi. U tugma bosilgandagina ishlaydi va ichida handleDelete ni kerakli argument bilan chaqiradi.

To’liq misolda:

// src/components/TaskList.jsx
const tasks = [
  { id: 1, title: "Non olish" },
  { id: 2, title: "Kitob o'qish" },
];

function TaskList() {
  function handleDelete(taskId) {
    console.log("O'chirish so'raldi, id:", taskId);
  }

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          {task.title}
          <button type="button" onClick={() => handleDelete(task.id)}>
            O'chirish
          </button>
        </li>
      ))}
    </ul>
  );
}

export default TaskList;

Ikkinchi vazifaning tugmasini bossangiz konsolda:

O'chirish so'raldi, id: 2

Qachon arrow kerak

Argument kerak bo’lmasa arrow ham kerak emas:

// Ortiqcha o'rash
<button onClick={() => handleClick()}>Bosing</button>

// Yetarli
<button onClick={handleClick}>Bosing</button>

Arrow funksiyani faqat qiymat uzatish kerak bo’lganda ishlating.

Hodisa obyekti va argument birga

Ikkalasi ham kerak bo’lsa, arrow funksiya parametrini e’lon qiling:

<input
  type="checkbox"
  onChange={(e) => handleToggle(task.id, e.target.checked)}
/>

function handleToggle(taskId, isChecked) {
  console.log(`Vazifa ${taskId}: ${isChecked ? "bajarildi" : "qaytarildi"}`);
}

Checkbox belgilansa konsolda:

Vazifa 1: bajarildi

Ishlovchi nomlash

Kelishuv oddiy va barcha loyihalarda bir xil:

Funksiya nomi handle bilan boshlanadi: handleClick, handleSubmit, handleTaskDelete.
Props orqali uzatiladigan funksiya on bilan: onDelete, onToggle.

// Ota-komponent: handleDelete yozadi
<TaskItem task={task} onDelete={handleDelete} />

// Bola: onDelete deb qabul qiladi
function TaskItem({ task, onDelete }) {
  return (
    <li>
      {task.title}
      <button type="button" onClick={() => onDelete(task.id)}>
        O'chirish
      </button>
    </li>
  );
}

Bu naqsh holatni ko’tarish darsida asosiy vosita bo’ladi.

Muammo: o’zgaruvchi o’zgaradi, ekran o’zgarmaydi

Endi hisoblagich yozib ko’ramiz. Mantiq to’g’ri ko’rinadi:

// ❌ Bu kod ishlamaydi
function Counter() {
  let count = 0;

  function handleClick() {
    count = count + 1;
    console.log("count endi:", count);
  }

  return (
    <div>
      <p>Bosilgan: {count}</p>
      <button type="button" onClick={handleClick}>
        Bosish
      </button>
    </div>
  );
}

export default Counter;

Tugmani uch marta bosing. Konsolda:

count endi: 1
count endi: 2
count endi: 3

Ekranda esa:

Bosilgan: 0

O’zgaruvchi o’zgaryapti, ekran qotib turibdi.

Aynan shu ikki vazifani useState bajaradi — keyingi darsning mavzusi. Hozircha bu kodni loyihangizda qoldiring va natijani o’z ko’zingiz bilan ko’ring: muammoni his qilmasdan yechimning ma’nosi tushunarsiz bo’ladi.

Amaliy mashq

Greeting komponentini yozing: tugma bosilganda alert chiqarsin.
onClick={handleClick} ni onClick={handleClick()} ga o’zgartiring. Sahifa ochilishi bilan oyna chiqqanini, tugma esa ishlamayotganini ko’ring. Keyin tuzating.
<input> qo’shing, onChange bilan har o’zgarishda kiritilgan qiymatni konsolga chiqaring.
Uchta elementli ro’yxat chizing, har birida “O’chirish” tugmasi bo’lsin va bosilganda konsolga o’sha elementning id si chiqsin.
Checkbox qo’shing va e.target.checked qiymatini konsolga chiqaring.
Yuqoridagi Counter komponentini ko’chiring, uch marta bosing va konsol bilan ekrandagi raqamni solishtiring.

6-qadam keyingi darsning butun mavzusini tayyorlaydi — konsolda o’zgarayotgan, ekranda qotib turgan raqamni o’zingiz ko’ring.

Qisqacha xulosa

Hodisa ishlovchisi JSX’da props sifatida beriladi: onClick={handleClick}.
Hodisa nomlari camelCase va on bilan boshlanadi: onClick, onChange, onSubmit.
onClick={handleClick()} — eng ko’p uchraydigan xato: funksiya chizish paytida chaqiriladi va tugma ishlamaydi.
Ishlovchi hodisa obyektini oladi: e.target.value, e.target.checked, e.preventDefault().
Argument uzatish uchun arrow funksiya bilan o’rang: onClick={() => handleDelete(task.id)}.
Ishlovchi handle bilan, props esa on bilan nomlanadi.
Oddiy o’zgaruvchini o’zgartirish ekranni yangilamaydi — React bundan xabardor bo’lmaydi va qiymat qayta chizishda yo’qoladi.

Keyingi darsda useState — shu muammoning yechimi.