Mengenalkan Event dalam Aplikasi Manajer Pengeluaran

Halo sana, para pengembang React masa depan! Hari ini, kita akan mendalaminya dunia menarik event dalam Aplikasi Manajer Pengeluaran kita. Jangan khawatir jika Anda baru dalam pemrograman – saya akan memandu Anda di setiap langkah dengan kesabaran seorang guru PAUD yang menjelaskan mengapa langit biru. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita mulai petualangan coding ini bersama!

Apa Itu Event dalam React?

Sebelum kita melompat ke kode, mari kita pahami apa itu event. Bayangkan Anda di sebuah pesta (pasti pesta React, kan), dan setiap kali Anda sentuh bahu seseorang, mereka merespon. Itu sebenarnya apa event dalam React – mereka adalah aksi yang memicu tanggapan dalam aplikasi Anda.

Dalam Aplikasi Manajer Pengeluaran kita, kita akan menggunakan event untuk membuat aplikasi kita interaktif dan responsif terhadap aksi pengguna. Misalnya, ketika pengguna mengklik tombol untuk menambahkan pengeluaran baru, itu adalah event yang kita harus tangani.

Menangani Event dalam Aplikasi Manajer Pengeluaran

Sekarang, mari kita kerahkan lengan dan tambahkan sedikit interaktivitas ke Aplikasi Manajer kita. Kita akan mulai dengan contoh sederhana dan perlahan-lahan berkembang menjadi interaksi yang lebih kompleks.

1. Menambahkan Tombol "Add Expense"

Pertama, mari kita tambahkan tombol yang pengguna dapat mengklik untuk menambahkan pengeluaran baru. Kita akan membuat komponen baru yang disebut AddExpenseButton.

import React from 'react';

const AddExpenseButton = () => {
const handleClick = () => {
console.log('Tombol Add Expense diklik!');
};

return (
<button onClick={handleClick}>Add Expense</button>
);
};

export default AddExpenseButton;

Mari kitauraikan ini:

• Kita mengimpor React (hal ini selalu diperlukan untuk JSX).
• Kita mendefinisikan komponen fungsional yang disebut AddExpenseButton.
• Dalam komponen, kita mendefinisikan fungsi handleClick. Untuk saat ini, itu hanya mencatat pesan ke konsol.
• Dalam pernyataan return, kita membuat tombol dengan atribut onClick. Atribut ini adalah cara kita melekatkan pengaturan event ke tombol.

Sekarang, setiap kali tombol diklik, 'Tombol Add Expense diklik!' akan dicatat ke konsol. Itu seperti mengajarkan aplikasi Anda berbicara – setiap klik adalah kata yang diajarkan!

2. Membuat Form Pengeluaran

Berikutnya, mari kita buat form tempat pengguna dapat memasukkan rincian pengeluaran mereka. Kita akan menyebut komponen ini ExpenseForm.

import React, { useState } from 'react';

const ExpenseForm = () => {
const [title, setTitle] = useState('');
const [amount, setAmount] = useState('');
const [date, setDate] = useState('');

const handleTitleChange = (event) => {
setTitle(event.target.value);
};

const handleAmountChange = (event) => {
setAmount(event.target.value);
};

const handleDateChange = (event) => {
setDate(event.target.value);
};

const handleSubmit = (event) => {
event.preventDefault();
console.log('Form disubmit:', { title, amount, date });
// Di sini Anda biasanya mengirimkan data ini ke komponen induk atau API
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={handleTitleChange} placeholder="Judul Pengeluaran" />
<input type="number" value={amount} onChange={handleAmountChange} placeholder="Jumlah" />
<input type="date" value={date} onChange={handleDateChange} />
<button type="submit">Add Expense</button>
</form>
);
};

export default ExpenseForm;

Wah, itu banyak hal untuk diambil! Mari kitauraikan langkah demi langkah:

1. Kita mengimpor useState dari React untuk mengelola state form kita.
2. Kita membuat variabel state untuk title, amount, dan date menggunakan hook useState.
3. Kita mendefinisikan fungsi pengatur untuk setiap field input. Fungsi ini memperbarui state saat pengguna mengetik.
4. Kita membuat fungsi handleSubmit yang menghindari perilaku default form pengiriman dan mencatat data form.
5. Dalam JSX, kita membuat form dengan field input untuk judul, jumlah, dan tanggal. Setiap input memiliki prop value (dikendalikan oleh state) dan prop onChange (menunjuk ke fungsi pengaturannya).
6. Form memiliki prop onSubmit yang menunjuk ke fungsi handleSubmit.

Form ini seperti seorang sekretaris yang terlatih baik – dia mendengarkan dengan hati dan mengingat semua yang Anda katakan!

3. Menyusun State ke Atas

Sekarang, mari kita katakan kita ingin menambahkan pengeluaran baru ke daftar pengeluaran. Kita perlu menyusun state ke atas ke komponen induk. Mari kita buat komponen ExpenseManager:

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';

const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);

const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};

return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} />
</div>
);
};

export default ExpenseManager;

Dan mari kita modifikasi ExpenseForm untuk menggunakan prop onAddExpense:

import React, { useState } from 'react';

const ExpenseForm = ({ onAddExpense }) => {
// ... definisi state dan pengatur sebelumnya ...

const handleSubmit = (event) => {
event.preventDefault();
onAddExpense({ title, amount, date });
setTitle('');
setAmount('');
setDate('');
};

// ... sisanya komponen ...
};

export default ExpenseForm;

Sekarang, ketika form disubmit, ia memanggil fungsi onAddExpense yang diberikan oleh induk, menambahkan pengeluaran baru ke daftar. Itu seperti keluarga yang bekerja bersama – anak (ExpenseForm) memberitahu orang tua (ExpenseManager) tentang pengeluaran baru, dan orang tua mengingatnya untuk semua!

4. Menambahkan Fungsionalitas Hapus

Akhirnya, mari kita tambahkan kemampuan menghapus pengeluaran. Kita akan modifikasi komponen ExpenseList:

import React from 'react';

const ExpenseList = ({ expenses, onDeleteExpense }) => {
return (
<ul>
{expenses.map((expense, index) => (
<li key={index}>
{expense.title} - ${expense.amount} ({expense.date})
<button onClick={() => onDeleteExpense(index)}>Hapus</button>
</li>
))}
</ul>
);
};

export default ExpenseList;

Dan perbarui ExpenseManager:

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';

const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);

const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};

const deleteExpense = (index) => {
setExpenses((prevExpenses) => prevExpenses.filter((_, i) => i !== index));
};

return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} onDeleteExpense={deleteExpense} />
</div>
);
};

export default ExpenseManager;

Sekarang kita memiliki Manajer Pengeluaran yang sepenuhnya fungsional dengan kemampuan tambah dan hapus!

Kesimpulan

Selamat! Anda telah berhasil membuat aplikasi Manajer Pengeluaran yang reaktif. Anda telah belajar bagaimana menangani event, mengelola state, dan mengirim data antar komponen. Ingat, belajar React adalah seperti belajar menunggang sepeda – mungkin terlihat wobbly awalnya, tapi dengan latihan, Anda akan mulai berjalan dengan nyaman!

Berikut adalah tabel yang menggabungkan pengatur event yang kita gunakan:

Pengatur Event	Komponen	Tujuan
handleClick	AddExpenseButton	Catat pesan saat tombol diklik
handleTitleChange	ExpenseForm	Perbarui state judul saat input berubah
handleAmountChange	ExpenseForm	Perbarui state jumlah saat input berubah
handleDateChange	ExpenseForm	Perbarui state tanggal saat input berubah
handleSubmit	ExpenseForm	Cegah perilaku default form pengiriman dan tambahkan pengeluaran baru
onAddExpense	ExpenseManager	Tambahkan pengeluaran baru ke daftar pengeluaran
onDeleteExpense	ExpenseManager	Hapus pengeluaran dari daftar pengeluaran

Tetap latih, tetap coding, dan terutama, tetap bersenang-senang! React adalah perjalanan, dan Anda telah berada di jalur menuju menjadi master React. Sampaijumpa lagi, coding saja!

Credits: Image by storyset