ReactJS - Pengurusan Peristiwa

Hai sana, bakal pengembang React! Hari ini, kita akan melihat dunia yang menarik pengurusan peristiwa dalam ReactJS. Sebagai guru sains komputer yang ramah di lingkungan Anda, saya sangat gembira untuk memandu 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 suka), dan mari kita mulai!

Pengurusan Peristiwa dalam ReactJS

Peristiwa adalah darah kehidupan aplikasi web interaktif. Mereka seperti tombol dan tuas di kokpit pesawat ruang angkasa - mereka membuat hal-hal terjadi! Dalam ReactJS, pengurusan peristiwa adalah bagaimana kita menangani interaksi pengguna seperti klik, tekanan tombol, dan pengajuan formulir.

Bayangkan Anda sedang membuat permainan penyet tombol sederhana. Setiap kali pengguna mengklik tombol, Anda ingin meningkatkan skor. Itu di mana pengurusan peristiwa berguna!

Peristiwa sintetik React

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

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

Menambahkan Peristiwa

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

function AlertButton() {
return (
<button onClick={() => alert('Anda mengklik saya!')}>
Klik saya!
</button>
);
}

Dalam contoh ini:

• Kita mendefinisikan komponen fungsi yang disebut AlertButton.
• Dalam komponen, kita mengembalikan elemen <button>.
• Kita menambahkan atribut onClick ke tombol. Ini adalah cara kita menambahkan pengguna 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 "Anda mengklik saya!".

Menangani Peristiwa

Sekarang, mari kita membuat hal ini sedikit lebih menarik. Sebaliknya 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>Anda telah mengklik {count} kali</p>
<button onClick={handleClick}>
Klik saya!
</button>
</div>
);
}

mari kitauraikan ini:

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

Setiap kali Anda mengklik tombol, hitungan akan meningkatkan 1!

Mengirimkan Argumen ke Penangan Peristiwa

kadang-kadang, Anda mungkin ingin mengirimkan informasi tambahan ke penangan peristiwa 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>Pilihbuah:</h2>
<button onClick={() => handleFruitClick('Apel')}>Apel</button>
<button onClick={() => handleFruitClick('Pisang')}>Pisang</button>
<button onClick={() => handleFruitClick('Ceri')}>Ceri</button>
<p>Anda memilih: {selectedFruit}</p>
</div>
);
}

Dalam contoh ini:

1. Kita membuat variabel state selectedFruit untuk melacak buah yang dipilih.
2. Fungsi handleFruitClick kita menerima parameter fruit.
3. Dalam 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.

Peristiwa Umum React

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

Nama Peristiwa	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, peristiwa ini digunakan dalam camelCase di React, tidak seperti rekanan lowercase HTML mereka.

Dan begitu pun, teman-teman! Anda telah mengambil langkah pertama Anda ke dalam dunia pengurusan peristiwa dalam React. Latih dengan contoh ini, cobalah untuk menggabungkan konsep yang berbeda, dan segera Anda akan menciptakan aplikasi React interaktif seperti seorang ahli!

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

Credits: Image by storyset