Events

React Events

HTML DOM voqealari kabi, React foydalanuvchi voqealariga asoslangan harakatlarni bajarishi mumkin.

React HTML bilan bir xil voqealarga ega: click, change, mouseover va hokazo.

Voqealarni Qo'shish

React voqealari camelCase sintaksisida yoziladi:

onClick o'rniga onclick.

React voqea handlerlari qavs ichida yoziladi:

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

Misol: shoot funktsiyasini Football komponentiga qo'shing:

function Football() {
  const shoot = () => {
    alert("Zo'r zarba!");
  }
 
  return (
    <button onClick={shoot}>Zarba ber!</button>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

Argumentlarni O'tkazish

Voqea handleriga argumentni uzatish uchun, o'q otish funktsiyasidan foydalaning.

Misol: shoot funktsiyasiga "Goal!" parametrini uzating, o'q otish funktsiyasi yordamida:

function Football() {
  const shoot = (a) => {
    alert(a);
  }
 
  return (
    <button onClick={() => shoot("Goal!")}>Zarba ber!</button>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

React Voqea Ob'ekti

Voqea handlerlari funktsiyani ishga tushirgan React voqeasiga kirish huquqiga ega.

Bizning misolda voqea "click" voqeasi.

Misol: O'q otish funktsiyasi: Voqea ob'ektini qo'lda yuborish:

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' funktsiyani ishga tushirgan React voqeasini bildiradi,
    bu holda 'click' voqeasi
    */
  }
 
  return (
    <button onClick={(event) => shoot("Goal!", event)}>Zarba ber!</button>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

Bu Form bilan tanishganimizda yordam beradi.

React Events

Voqealarni Qo'shish

Argumentlarni O'tkazish

React Voqea Ob'ekti

Ushbu sahifada