Воқеаҳоро дар JSX насб кардан

Биёед акнун бо воқеаҳо дар React кор карданро омӯзем. Масалан, биёед тавре кунем, ки клик кардан рӯи блок alert-ро бо як матн ба намоиш гузорад.

Бигзор мо функсияи showMess дошта бошем, ки alert -ро бо паёме чоп мекунад, ва дар рамзи HTML тугмае бошад, ки мо дӯст дорем клик кардан рӯи он ин alert -ро бинем:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

Биёед ба тугмаи мо воқеаи onclick-ро мавриди истифода қарор диҳем, то ки клик кардан рӯи ин див функсияи showMess-ро корӣ кунад. Барои ин лозим аст ки хусусияти onClick-ро илова кунем (дақиқ дар camelCase, яъне onClick, на onclick), ва дар он функсияеро муайян кунем, ки дар ин воқеа иҷро мешавад:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

Ин тавр бо воқеаҳо кор кардан амалӣ мешавад: хусусият илова карда мешавад (масалан, onClick ё onFocus), қимати хусусият методиро муайян мекунад, ки дар ин воқеа даъват карда мешавад.

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}