Memperkenalkan Peristiwa dalam Aplikasi Pengelolaan Pengeluaran

Hai sana, para pengembang React masa depan! Hari ini, kita akan melihat dunia yang menarik peristiwa dalam Aplikasi Pengelolaan Pengeluaran kami. Jangan khawatir jika Anda baru dalam pemrograman – saya akan mengarahkan Anda setiap langkah dengan kesabaran seorang guru PAUD yang menjelaskan mengapa langit biru. Jadi, ambil minuman favorit Anda, rajinlah, dan mari kita mulai petualangan pemrograman ini bersama!

Apa Itu Peristiwa dalam React?

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

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

Menangani Peristiwa dalam Aplikasi Pengelolaan Pengeluaran

Sekarang, mari kita merenggangkan lengan dan menambahkan sedikit interaktivitas ke Aplikasi Pengelolaan Pengeluaran kami. Kita akan mulai dengan contoh sederhana dan secara bertahap membangun interaksi yang lebih kompleks.

1. Menambahkan Tombol "Tambah Pengeluaran"

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 Tambah Pengeluaran ditekan!');
};

return (
<button onClick={handleClick}>Tambah Pengeluaran</button>
);
};

export default AddExpenseButton;

mari kitauraikan ini:

• Kita import React (harus selalu dilakukan 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 merender tombol dengan atribut onClick. Atribut ini adalah cara kita menghubungkan pengaturan peristiwa ke tombol.

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

2. Membuat Formulir Pengeluaran

Berikutnya, mari kita buat formulir tempat pengguna dapat memasukkan rincian pengeluarannya. Kita akan menamai 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('Formulir dikirim:', { 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">Tambah Pengeluaran</button>
</form>
);
};

export default ExpenseForm;

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

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

Formulir ini seperti seorang sekretaris yang terlatih baik – ia mendengarkan hati-hati apa yang Anda katakan dan mengingatnya semua!

3. Menarik State ke Atas

Sekarang, katakanlah kita ingin menambahkan pengeluaran baru ke daftar pengeluaran. Kita perlu menarik state 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, saat formulir dikirim, ia memanggil fungsi onAddExpense yang diberikan oleh induk, menambahkan pengeluaran baru ke daftar. Itu seperti keluarga yang bekerja bersama – anak (ExpenseForm) memberitahu induk (ExpenseManager) tentang pengeluaran baru, dan induk mengingatnya untuk semua!

4. Menambahkan Fungsionalitas Hapus

Akhirnya, mari kita tambahkan kemampuan menghapus pengeluaran. Kita akan memodifikasi 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 Pengelolaan Pengeluaran yang sepenuhnya berfungsi dengan kemampuan tambah dan hapus!

Kesimpulan

Selamat! Anda telah berhasil membuat aplikasi Pengelolaan Pengeluaran yang reaktif. Anda telah belajar bagaimana menangani peristiwa, mengelola state, dan mengirim data antar komponen. Ingat, belajar React seperti mengendarai sepeda – mungkin terlihat berlikuawal pertama kali, tapi dengan latihan, Anda akan mengendarai dengan lancar dalam no time!

Disini ada tabel yang menggabungkan pengatur peristiwa yang kita gunakan:

Pengatur Peristiwa	Komponen	Tujuan
handleClick	AddExpenseButton	Catat pesan saat tombol ditekan
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	Hindari perilaku default pengiriman formulir dan tambahkan pengeluaran
onAddExpense	ExpenseManager	Tambahkan pengeluaran baru ke daftar pengeluaran
onDeleteExpense	ExpenseManager	Hapus pengeluaran dari daftar pengeluaran

Lanjutkan belajar, terus coding, dan yang paling penting, tetap bersenang! React adalah perjalanan, dan Anda sudah berada di jalurnya untuk menjadi master React. Sampaijumpa lagi, selamat coding!

Credits: Image by storyset