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