Manajemen Event di ReactJS

Hai teman-teman, pengembang React masa depan! Hari ini, kita akan melihat dunia menarik manajemen event di ReactJS. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengorbit Anda dalam perjalanan ini. Jangan khawatir jika Anda baru dalam pemrograman - kita akan mulai dari dasar dan naik tingkat demi tingkat. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!

Manajemen Event di ReactJS

Event adalah darah merah aplikasi web interaktif. Mereka seperti tombol dan tuas di kokpit pesawat ruang angkasa - mereka membuat hal-hal terjadi! Dalam ReactJS, manajemen event adalah bagaimana kita menangani interaksi pengguna seperti klik, tekanan tombol, dan pengiriman formulir.

Imaginasi Anda sedang membuat permainan clicker sederhana. Setiap kali pengguna mengklik tombol, Anda ingin meningkatkan skor. Itu tempat manajemen event berguna!

Event sintetik React

Sebelum kita masuk ke kode, mari bicarakan sesuatu yang unik untuk React: Event Sintetik. Ini adalah cara React untuk memastikan bahwa event bekerja konsisten di berbagai browser. Itu seperti memiliki pengtranslator universal untuk aplikasi Anda!

React membungkus event native browser dan memberikan mereka antarmuka yang konsisten. Ini berarti Anda tidak perlu khawatir tentang keaneh-aneh browser tertentu saat menangani event.

Menambahkan Event

Mari kita mulai dengan contoh sederhana. Kita akan membuat tombol yang, saat diklik, akan menampilkan peringatan.

function AlertButton() {
return (
<button onClick={() => alert('You clicked me!')}>
Click me!
</button>
);
}

Dalam contoh ini:

• Kita definisikan komponen fungsi yang disebut AlertButton.
• Dalam komponen, kita kembalikan elemen <button>.
• Kita menambahkan atribut onClick ke tombol. Ini adalah cara kita melekatkan pengguna event listener di React.
• Atribut onClick diatur ke fungsi panah yang memanggil alert() dengan pesan kita.

Saat Anda merender komponen ini dan mengklik tombol, Anda akan melihat peringatan yang muncul mengatakan "You clicked me!".

Menangani Event

Sekarang, mari kita membuat hal ini sedikit lebih menarik. instead of hanya menampilkan peringatan, kita akan memperbarui state komponen saat tombol diklik.

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<p>You've clicked {count} times</p>
<button onClick={handleClick}>
Click me!
</button>
</div>
);
}

mari kitauraikan ini:

1. Kita import useState dari React untuk mengelola state komponen kita.
2. Kita definisikan komponen fungsi yang disebut ClickCounter.
3. Dalam komponen, kita gunakan useState(0) untuk membuat variabel state count yang diinisialisasi ke 0, dan fungsi setCount untuk memperbarui itu.
4. Kita definisikan fungsi handleClick yang memanggil setCount untuk meningkatkan hitungan.
5. Dalam JSX kita, kita tampilkan hitungan saat ini dan tombol.
6. Atribut onClick tombol diatur ke fungsi handleClick.

Setiap kali Anda mengklik tombol, hitungan akan meningkatkan 1!

Mengirimkan Argument ke Pengguna Event

kadang-kadang, Anda mungkin ingin mengirimkan informasi tambahan ke pengguna event handler Anda. Mari kita lihat contoh di mana kita memiliki tombol-tombol yang berbeda, masing-masing terkait dengan buah yang berbeda.

import React, { useState } from 'react';

function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('');

const handleFruitClick = (fruit) => {
setSelectedFruit(fruit);
};

return (
<div>
<h2>Pick a fruit:</h2>
<button onClick={() => handleFruitClick('Apple')}>Apple</button>
<button onClick={() => handleFruitClick('Banana')}>Banana</button>
<button onClick={() => handleFruitClick('Cherry')}>Cherry</button>
<p>You selected: {selectedFruit}</p>
</div>
);
}

Dalam contoh ini:

1. Kita membuat variabel state selectedFruit untuk mencatat buah yang dipilih.
2. Fungsi handleFruitClick kita mengambil parameter fruit.
3. Di setiap tombol onClick atribut, kita menggunakan fungsi panah untuk memanggil handleFruitClick dengan nama buah yang sesuai.

Saat Anda mengklik tombol, itu akan memperbarui state selectedFruit dengan nama buah yang Anda klik.

Event Umum React

Berikut adalah tabel dari beberapa event umum React yang Anda mungkin gunakan:

Nama Event	Deskripsi
onClick	Dipicu saat elemen diklik
onChange	Dipicu saat nilai elemen input berubah
onSubmit	Dipicu saat formulir dikirim
onMouseEnter	Dipicu saat mouse memasuki elemen
onMouseLeave	Dipicu saat mouse meninggalkan elemen
onKeyDown	Dipicu saat tombol ditekan
onKeyUp	Dipicu saat tombol dilepaskan
onFocus	Dipicu saat elemen menerima fokus
onBlur	Dipicu saat elemen kehilangan fokus

Ingat, event ini adalah camelCased di React, tidak seperti rekanan HTML mereka yang lowercase.

Dan itu saja, teman-teman! Anda baru saja mengambil langkah pertama ke dunia manajemen event di React. Latih dengan contoh ini, cobalah menggabungkan konsep yang berbeda, dan segera Anda akan membuat aplikasi React interaktif seperti seorang pro!

Ingat, dalam pemrograman, seperti dalam kehidupan, kunci adalah untuk terus mencoba dan belajar. Jangan takut untuk membuat kesalahan - mereka adalah batu loncatan ke sukses. Selamat pemrograman, dan may the React be with you!

Credits: Image by storyset