Melekatkan Peristiwa dalam JSX

Mari kita kaji kerja dengan peristiwa dalam React. Sebagai contoh, mari kita buat supaya apabila diklik pada blok, alert dengan beberapa teks dipaparkan.

Katakan kita mempunyai fungsi showMess, yang memaparkan alert dengan mesej, dan dalam kod HTML terdapat butang, yang apabila diklik, kita ingin melihat alert ini:

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

Mari kita ikat peristiwa onclick kepada butang kita supaya apabila klik pada div ini, fungsi showMess akan dipicu. Untuk ini, kita perlu tambahkan atribut onClick (tepat dalam camelCase, iaitu onClick, bukan onclick), dan di dalamnya nyatakan fungsi yang akan dilaksanakan apabila peristiwa ini berlaku:

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

Demikianlah cara kerja dengan peristiwa: tambahkan atribut (contohnya, onClick atau onFocus), nilai atribut dinyatakan sebagai kaedah yang akan dipanggil apabila peristiwa itu berlaku.

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