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>;
}