ReactJS - Membuat Komponen yang Sadar Event

Halo sana, para pengembang React masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia komponen yang sadar event dalam ReactJS. Jangan khawatir jika Anda baru dalam pemrograman – saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini secara bertahap. Pada akhir panduan ini, Anda akan membuat komponen yang dapat merespon tindakan pengguna seperti seorang ahli!

Apa Itu Komponen Sadar Event?

Sebelum kita mendalam, mari kita pahami apa yang dimaksud dengan komponen "sadar event". Bayangkan Anda di sebuah pesta (tetap ikut, ini terkait dengan pemrograman, saya janji!). Anda tidak hanya berdiri saja seperti patung – Anda merespon hal-hal yang terjadi di sekitar Anda. Seseorang memberitakan lelucon, Anda tersenyum. Seseorang menawarkan makanan, Anda menerima. Itu tepatnya apa yang dilakukan komponen sadar event dalam React – itu merespon hal-hal yang terjadi, seperti klik tombol atau masukan keyboard.

Bagaimana Membuat Komponen Sadar Event?

Sekarang, mari kita melipat tangan dan membuat komponen sadar event pertamanya. Kita akan mulai dengan sesuatu yang sederhana – sebuah tombol yang menghitung berapa kali ia diklik.

Langkah 1: Menyiapkan Komponen

Pertama, mari kita buat komponen React dasar:

import React, { useState } from 'react';

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

return (
<div>
<button>Click me!</button>
<p Anda telah mengklik {count} kali</p>
</div>
);
}

export default ClickCounter;

mari kitauraikan ini:

1. Kita mengimpor React dan useState dari pustaka 'react'.
2. Kita mendefinisikan komponen fungsi ClickCounter.
3. Di dalamnya, kita menggunakan hook useState untuk membuat variabel state count dan fungsi untuk mengupdate nya, setCount.
4. Kita mengembalikan beberapa JSX dengan tombol dan paragraf yang menunjukkan hitungan saat ini.

Langkah 2: Menambahkan Penangan Event

Sekarang, mari kita membuat tombol ini melakukan sesuatu saat diklik:

import React, { useState } from 'react';

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

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

return (
<div>
<button onClick={handleClick}>Click me!</button>
<p Anda telah mengklik {count} kali</p>
</div>
);
}

export default ClickCounter;

Apa yang baru disini?

1. Kita menambahkan fungsi handleClick yang meningkatkan count sebesar 1.
2. Kita menambahkan atribut onClick ke tombol kita, mengatur nya ke handleClick.

Sekarang, setiap kali tombol diklik, handleClick akan dipanggil, mengupdate hitungan kita!

Menyampaikan Informasi Ekstra ke Penangan Event

kadang-kadang, kita ingin menyampaikan informasi tambahan ke penangan event kita. Mari kita buat contoh yang lebih kompleks – daftar buah-buahan dimana mengklik buah akan mencatat namanya.

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

const handleFruitClick = (fruitName) => {
console.log(`Anda mengklik ${fruitName}`);
};

return (
<ul>
{fruits.map((fruit, index) => (
<li key={index} onClick={() => handleFruitClick(fruit)}>
{fruit}
</li>
))}
</ul>
);
}

export default FruitList;

mari kitauraikan ini:

1. Kita memiliki array fruits.
2. Fungsi handleFruitClick menerima parameter fruitName dan mencatatnya.
3. Dalam JSX kita, kita menggunakan map untuk membuat item daftar untuk setiap buah.
4. onClick untuk setiap item diatur ke fungsi arrow yang memanggil handleFruitClick dengan nama buah.

Dengan cara ini, kita menyampaikan nama buah ke penangan event saat ia diklik!

Penangan Event Umum di React

React mendukung banyak penangan event. Berikut adalah tabel dari beberapa yang umum:

Penangan Event	Deskripsi
onClick	Dipicu saat elemen diklik
onChange	Dipicu saat nilai elemen input berubah
onSubmit	Dipicu saat form disubmit
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

Kesimpulan

Selamat! Anda telah mengambil langkah pertama dalam membuat komponen yang sadar event dalam React. Kita telah menjelajahi dasar-dasar penanganan klik, pengupdatean state berdasarkan event, dan bahkan menyampaikan informasi tambahan ke penangan event.

Ingat, menjadi mahir dalam ini adalah seperti belajar menari – itu memerlukan latihan! Jangan frustasi jika itu tidak langsung berjalan ( ungkapan yang diinginkan). Terus mencoba, cobalah membuat jenis interaksi berbeda, dan segera Anda akan dapat mengkoreografi interaksi pengguna kompleks dengan mudah!

Dalam tahun-tahun mengajar saya, saya telah melihat banyak siswa bergerak dari kebingungan ke kepercayaan diri dengan konsep ini. Anda sedang dalam jalannya untuk bergabung dengan mereka. Terus kode, tetap bercuriga, dan terutama, bersenang-senang dengannya!

Credits: Image by storyset