费用管理APP中的事件介绍

你好，未来的React开发者们！今天，我们将深入探索我们的费用管理APP中的事件世界。如果你是编程新手，不用担心——我会像幼儿园老师耐心解释天空为什么是蓝色一样，一步步引导你。所以，拿起你最喜欢的饮料，舒服地坐下来，让我们一起开始这段编程冒险！

ReactJS - Introduce Events in Expense Manager APP

React中的事件是什么？

在我们跳进代码之前，先来了解一下事件是什么。想象你在一个派对上（当然是一个React派对），每次你轻拍某人的肩膀，他们都会有所反应。这在React中本质上就是事件——它们是触发应用程序中响应的动作。

在我们的费用管理APP中，我们将使用事件来使我们的应用程序具有交互性和响应性。例如，当用户点击按钮添加新费用时，这就是我们需要处理的事件。

在费用管理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