Penanganan Event pada React

Handling atau penanganan event pada elemen React mirip dengan event yang ada pada Javascript, namun dengan beberapa perbedaan yaitu:

  • Penamaan event pada React menggunakan camelCase, tidak lagi lowercase
  • Event handler diisi dengan nama fungsi saja, tidak perlu pemanggilan fungsi.

Perhatikan contoh event onclick berikut ini:

1
2
3
4
5
6
7
8
<body>
  <script>
    function clickButton() {
      alert("Tombol telah diklik")
    }
  </script>
  <button onclick="clickButton()">Click Me</button>
</body>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import React from "react"

export default function App() {
  function clickButton() {
    alert("Tombol telah diklik")
  }
  return (
    <div className='App'>
      <button onClick={clickButton}>Click Me</button>
    </div>
  )
}

Meski menggunakan fungsi yang sama, namun cara penempatan fungsi handler ke dalam event click berbeda antara javascript biasa dan React.

Event Pada Formulir

Formulir atau form merupakan elemen yang penting dalam pengembangan website, ini dikarenakan formulir memudahkan kita dalam mengunggah data ke server. Beberapa event yang terdapat pada formulir yakni: onSubmit, onChange, dan onReset.

onSubmit

onSubmit adalah event yang terjadi ketika formulir disubmit, bisa melalui klik tombol submit atau kita menekan enter pada keyboard. Penempatan event ini pada tag HTML form. Dikarenakan tag form bisa berisi baanyak tag input, maka untuk mengakses input di dalamnya kita perlu menggunakan property elements.

Agar formulir html ketika disubmit tidak terjadi reload page, maka kita bisa mengatasinya menggunakan method event.preventDefault()

CodeSandBox.io Online IDE memudahkan kita untuk mencoba jalankan kode React

Silahkan pelajari contoh kode berikut ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from "react"

export default function App() {
  // buat fungsi untuk menangani event submit
  const submitHandler = (event) => {
    // agar halaman tidak tereload saat event submit
    event.preventDefault()
    // dapatkan nilai dari input berdasarkan id-nya
    let email = event.target.elements.email.value
    let password = event.target.elements.password.value
    // tampilkan email dan password pada console
    console.log(`${email} dan ${password}`)
  }

  // buat style untuk form
  const formStyle = {
    display: "flex",
    flexDirection: "column",
  }

  // masukkan submitHandler pada onSubmit
  return (
    <form onSubmit={submitHandler} style={formStyle}>
      <label htmlFor='email'>Masukkan Email:</label>
      <input type='email' id='email' name='email' />
      <label htmlFor='password'>Masukkan Password:</label>
      <input type='password' id='password' name='password' />
      <button>Submit</button>
    </form>
  )
}

Dari contoh di atas dapat dipelajari tentang:

  • Membuat fungsi penanganan event submit (submit event handler)
  • Mengambil nilai yang diinputkan oleh user pada element di dalam formulir
  • menambahkan inline style pada formulir