Hodisalarni boshqarish

Foydalanuvchi harakatlariga javob berish

Event (hodisa) — bu foydalanuvchi qiladigan narsa — bosish, terish, formani yuborish. React'da siz event handler bilan javob berasiz: hodisa sodir bo'lganda ishga tushadigan function. Uni onClick kabi prop bilan biriktirasiz.

function ClickMe() {
  function handleClick() {
    console.log("Button was clicked");
  }
 
  return <button onClick={handleClick}>Click me</button>;
}

React hodisalar uchun camelCase nomlarni ishlatadi: onClick, onChange, onSubmit, onMouseEnter va hokazo. Erta uchraydigan eng keng tarqalganlari — tugmalar uchun onClick va inputlar uchun onChange.

Function'ni uzating — uni chaqirmang

Bu deyarli har bir yangi boshlovchi qiladigan xato. Siz React'ga function'ni chaqirish natijasini emas, balki function'ning o'zini berishingiz kerak.

// Correct — pass the function, React calls it on click
<button onClick={handleClick}>Click</button>
 
// Wrong — the () calls it immediately during render
<button onClick={handleClick()}>Click</button>

handleClick() bilan function component render bo'lgan zahoti (bosishda emas) ishga tushadi va uning qaytargan qiymati onClick'ga uzatiladi. Qavslarni qoldiring, shunda React uni keyinroq, bosish haqiqatan sodir bo'lganda chaqira oladi.

Agar argument uzatishingiz kerak bo'lsa, uni juda erta chaqirilmasligi uchun arrow function ichiga o'rang:

<button onClick={() => handleClick("hello")}>Click</button>

Endi onClick function qabul qiladi; bu function faqat bosilganda handleClick("hello")'ni chaqiradi.

Event'dan state'ni yangilash

Events va state birgalikda ishlaydi: event handler odatda siz state'ni yangilaydigan joy. Bu yerda bosish hisoblagichni oshiradi.

import { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
 
  function increase() {
    setCount(count + 1); // update state → React re-renders
  }
 
  return <button onClick={increase}>Count: {count}</button>;
}

Matn inputlari uchun onChange handler yangi qiymatni event.target.value'dan o'qiydi:

function NameInput() {
  const [name, setName] = useState("");
 
  return (
    <input
      value={name}
      onChange={(event) => setName(event.target.value)}
    />
  );
}

Har bir tugma bosilishi onChange'ni ishga tushiradi, u terilgan matnni o'qiydi va state'da saqlaydi, React esa yangilangan value bilan qayta render qiladi. Bu shakl — state input'ni boshqaradi va event state'ni yangilaydi — React'dagi formalarning poydevoridir.

Suhbat maslahatlari

• Handlerlarni onClick={handleClick} kabi camelCase props bilan biriktiring va handleClick() emas, function'ni uzatishingizni tushuntiring.
• Arrow function bilan argument qanday uzatilishini ko'rsating: onClick={() => doThing(id)}.
• Input qiymatini onChange handler ichida event.target.value'dan o'qing va uni state setter bilan saqlang.