React hodisalari

Xuddi HTML DOM hodisalari kabi, React ham foydalanuvchi voqealari asosida amallarni bajarishi mumkin.

React HTML bilan bir xil hodisalarga ega: bosish, o‘zgartirish, sichqonchani bosish va h.k.

Voqealar qo‘shish

React hodisalari camelCase sintaksisida yozilgan:

onclick o‘rniga onClick.

React hodisa ishlovchilari jingalak qavslar ichida yoziladi:

onclick="shoot()" o‘rniga onClick={shoot}.

React:

<button onClick={shoot}>Take the Shot!</button>

HTML:

<button onclick="shoot()">Take the Shot!</button>

Misol:

shoot funksiyasini Football komponenti ichiga joylashtiring:

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

Misolni ishga tushirish »

Argumentlarni o‘tkazish

Hodisa ishlovchisiga (event handler) argument uzatish uchun arrow funksiyasidan foydalaning.

Misol:

“Maqsad!” yuboring. shoot parametri sifatida strelka yordamida funksiya funksiya:

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

Misolni ishga tushirish »

React hodisasi obyekti

Voqealar ishlovchilari funksiyani ishga tushirgan React hodisasiga kirish huquqiga ega.

Bizning misolimizda hodisa "klik" hodisasidir.

Misol:

Ok funksiyasi: hodisa obyektini qo‘lda yuborish:

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }

  return (
    <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

Misolni ishga tushirish »

Bu keyingi bobda Formani ko‘rib chiqsak foydali bo‘ladi.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish