費用管理員APP中的事件介紹

你好，未來的React開發者！今天，我們將要深入我們的費用管理員APP中的事件世界。如果你是編程新手，不用擔心——我會像耐心地給幼兒園孩子解釋天空為什麼是藍色一樣，一步步引導你。所以，拿起你喜歡的飲料，放鬆一下，讓我們一起踏上這次編程冒險吧！

ReactJS - Introduce Events in Expense Manager APP

React中的事件是什麼？

在我們投入代碼之前，讓我們先了解事件是什麼。想像你在派對上（當然是React派對），每次你輕觸某人的肩膀，他們就會有所反應。這基本上就是React中事件的含義——它們是觸發應用程序中反應的操作。

在我們的費用管理員APP中，我們將使用事件來使應用程序與用戶操作互動並做出反應。例如，當用戶點擊按鈕添加新支出時，那就是我們需要處理的事件。

在費用管理員APP中處理事件

現在，讓我們捋起袖子，為我們的費用管理員添加一些互動性。我們從一個簡單的例子開始，然後逐步構建到更複雜的交互。

1. 添加一個"添加支出"按鈕

首先，讓我們添加一個用戶可以點擊來添加新支出的按鈕。我們將創建一個名為AddExpenseButton的新組件。

import React from 'react';

const AddExpenseButton = () => {
const handleClick = () => {
console.log('添加支出按鈕被點擊！');
};

return (
<button onClick={handleClick}>添加支出</button>
);
};

export default AddExpenseButton;

讓我們分解一下：

我們導入React（對於JSX總是必要的）。
我們定義了一個名為AddExpenseButton的功能組件。
在組件內部，我們定義了一個名為handleClick的函數。現在，它只是將一條消息記錄到控制台。
在返回語句中，我們渲染了一個帶有onClick屬性的按鈕。這個屬性是我們將事件處理程序附加到按鈕的方式。

現在，每次按鈕被點擊時，'添加支出按鈕被點擊！'將被記錄到控制台。這就像教你的應用程序說話——每次點擊都是它學會的單詞！

2. 創建一個支出表單

接下來，讓我們創建一個表單，用戶可以在此輸入他們支出的細節。我們將稱這個組件為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('表單已提交：', { title, amount, date });
// 在這裡，你通常會將這些數據發送到父組件或API
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={handleTitleChange} placeholder="支出標題" />
<input type="number" value={amount} onChange={handleAmountChange} placeholder="金額" />
<input type="date" value={date} onChange={handleDateChange} />
<button type="submit">添加支出</button>
</form>
);
};

export default ExpenseForm;

哇，這有很多要吸收的！讓我們一步步分解：

我們從React導入了useState以管理我們表單的狀態。
我們為title、amount和date創建了狀態變量，使用useState鈎子。
我們為每個輸入字段定義了處理函數。這些函數在用戶輸入時更新狀態。
我們創建了一個handleSubmit函數，它阻止了表單的默認提交行為並記錄表單數據。
在JSX中，我們創建了一個表單，其中有標題、金額和日期的輸入字段。每個輸入都有value屬性（由狀態控制）和onChange屬性（指向其處理函數）。
表單有一個onSubmit屬性，指向我們的handleSubmit函數。

這個表單就像一個訓練有素的秘書——它認真聆聽你告訴它的每一件事，並記住它們！

3. 上傳狀態

現在，假設我們想要將新支出添加到支出列表中。我們需要將我們的狀態上傳到父組件。讓我們創建一個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;

並讓我們修改我們的ExpenseForm以使用onAddExpense屬性：

import React, { useState } from 'react';

const ExpenseForm = ({ onAddExpense }) => {
// ...之前的狀態和處理函數定義...

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

// ...組件的其他部分...
};

export default ExpenseForm;

現在，當表單被提交時，它會調用從父組件傳遞下來的onAddExpense函數，將新支出添加到列表中。這就像一個家庭一起工作——孩子（ExpenseForm）告訴父母（ExpenseManager）關於新支出的信息，父母為所有人記住它！

4. 添加刪除功能

最後，讓我們添加刪除支出的能力。我們將修改我們的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)}>刪除</button>
</li>
))}
</ul>
);
};

export default ExpenseList;

並更新我們的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;

現在我們有了一個具有添加和刪除功能的完整功能支出管理員！

結論

恭喜你！你剛剛建立了一個反應性的支出管理員應用程序。你學會了如何處理事件、管理狀態以及在各組件之間傳遞數據。記住，學習React就像學騎自行車一樣——起初可能會有些晃動，但隨著練習，你會很快騎得穩當！

這裡是一個我們使用過的事件處理程序總結表：

事件處理程序	組件	目的
handleClick	AddExpenseButton	點擊按鈕時記錄消息
handleTitleChange	ExpenseForm	輸入改變時更新標題狀態
handleAmountChange	ExpenseForm	輸入改變時更新金額狀態
handleDateChange	ExpenseForm	輸入改變時更新日期狀態
handleSubmit	ExpenseForm	阻止默認表單提交並添加新支出
onAddExpense	ExpenseManager	將新支出添加到支出列表
onDeleteExpense	ExpenseManager	從支出列表中刪除支出

持續練習，持續編程，最重要的是，享受樂趣！React是一段旅程，而你已經走上了成為React高手的道路。下次見，快樂編程！

Credits: Image by storyset