Menangani Acara di React- Panduan komprehensif untuk menangani acara di React .js

Acara memainkan peran penting dalam menciptakan antarmuka pengguna yang interaktif dan dinamis di React. Dalam tutorial ini, kita akan mengeksplorasi cara menangani event React dan merespons tindakan pengguna secara efektif.

 

Penanganan Acara di BEJ

React menyediakan sistem peristiwa sintetik yang membungkus peristiwa browser asli dan menormalkannya di berbagai browser. Kami dapat melampirkan penangan acara langsung ke elemen JSX menggunakan onEventName atribut.

Contoh:

function handleClick() {  
  console.log("Button clicked!");  
}  
  
<button onClick={handleClick}>Click Me</button>

 

Penangan Acara dan Objek Acara

Saat suatu peristiwa dipicu, React secara otomatis meneruskan objek peristiwa ke fungsi penangan peristiwa. Kami dapat mengakses objek ini untuk mendapatkan informasi tambahan tentang acara tersebut, seperti elemen target, koordinat mouse, dll.

Contoh:

function handleMouseOver(event) {  
  console.log("Mouse coordinates:", event.clientX, event.clientY);  
}  
  
<div onMouseOver={handleMouseOver}>Hover over me</div>

 

Pengikat Event Handler

Saat meneruskan event handler sebagai props, penting untuk mengikatnya ke instance komponen. Ini memastikan bahwa this konteks yang benar dipertahankan saat peristiwa dipicu.

Contoh:

class MyComponent extends React.Component {  
  handleClick() {  
    console.log("Button clicked!");  
  }  
  
  render() {  
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;  
  }  
}

 

Propagasi Peristiwa dan Mencegah Tindakan Default

React menggunakan sistem kejadian sintetik yang secara otomatis menangani propagasi kejadian. Untuk mencegah perilaku browser default, seperti pengiriman formulir atau navigasi tautan, kita dapat memanggil event.preventDefault() metode tersebut.

Contoh:

function handleSubmit(event) {  
  event.preventDefault();  
  console.log("Form submitted!");  
}  
  
<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

Dengan memahami cara menangani peristiwa di React, Anda dapat membuat antarmuka pengguna yang interaktif dan responsif yang merespons tindakan pengguna dengan mulus

 

Berikut adalah daftar acara umum di React

1. onClick: Event ini terjadi ketika sebuah elemen diklik.

Contoh:

<button onClick={handleClick}>Click Here</button>

2. onChange: Event ini terjadi ketika nilai elemen input(input, select, textarea) berubah.

Contoh:

<input type="text" onChange={handleChange} />

3. onSubmit: Acara ini terjadi saat formulir dikirimkan. Contoh:

<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

4. onMouseEnter: Event ini terjadi ketika pointer mouse memasuki sebuah elemen.

Contoh:

<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div>

5. onMouseLeave: Event ini terjadi ketika pointer mouse meninggalkan sebuah elemen.

Contoh:

<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div>

6. onKeyDown: Peristiwa ini terjadi saat tombol ditekan.

Contoh:

<input type="text" onKeyDown={handleKeyDown} />

7. onKeyUp: Acara ini terjadi saat kunci dilepaskan.

Contoh:

<input type="text" onKeyUp={handleKeyUp} />

8. onFocus: Peristiwa ini terjadi saat elemen menerima fokus.

Contoh:

<input type="text" onFocus={handleFocus} />

9. onBlur: Peristiwa ini terjadi saat elemen kehilangan fokus.

Contoh:

<input type="text" onBlur={handleBlur} />

10. onScroll: Event ini terjadi saat sebuah elemen di-scroll.

Contoh:

<div onScroll={handleScroll}>Scrollable Content</div>

 

Ini hanyalah beberapa contoh kejadian umum di React. Anda dapat menggunakan acara ini atau membuat acara khusus sesuai kebutuhan Anda di React aplikasi Anda.