費用管理アプリでのイベント導入
こんにちは、将来のReact開発者さんたち！今日は、私たちの費用管理アプリにおけるイベントの世界に飛び込みます。プログラミングが初めてであっても心配しないでください - 幼稚園の先生が空がなぜ青いのか説明するような忍耐強さで、ステップバイステップガイドします。お気に入りの飲み物を用意して、リラックスし、このコーディング冒険に一緒に参加しましょう！
Reactでのイベントとは？
コードに飛び込む前に、イベントとは何かを理解しましょう。パーティ（もちろんReactのパーティ）で、誰かの肩を叩くたびに、その人が反応するのを思い浮かべてください。それがReactでのイベントです。ユーザーのアクションに応じてアプリケーションが反応するアクションです。
私たちの費用管理アプリでは、イベントを使用してアプリケーションをインタラクティブでユーザーに応答するようにします。例えば、ユーザーが新しい費用を追加するためのボタンをクリックするのは、私たちが処理するイベントです。
費用管理アプリでのイベント処理
では、私たちの費用管理アプリにインタラクティブ性を追加しましょう。まずは簡単な例から始めて、段階的により複雑なインタラクションに進みます。
1. 「費用を追加」ボタンの追加
まず、ユーザーが新しい費用を追加するためにクリックできるボタンを追加します。AddExpenseButtonという新しいコンポーネントを作成します。
import React from 'react';
const AddExpenseButton = () => {
const handleClick = () => {
console.log('Add Expense button clicked!');
};
return (
<button onClick={handleClick}>Add Expense</button>
);
};
export default AddExpenseButton;これを分解すると：
- Reactをインポートします（JSXには常に必要です）。
-
AddExpenseButtonという関数コンポーネントを定義します。 - コンポーネント内で
handleClickという関数を定義します。現時点では、コンソールにメッセージをログします。 -
returnステートメント内で、onClick属性を持つボタンをレンダリングします。この属性は、イベントハンドラをボタンにアタッチする方法です。
ボタンがクリックされるたびに、'Add Expense button clicked!'がコンソールにログされます。アプリが話すことを教えるようなものです。それぞれのクリックが学ぶ言葉です！
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('Form submitted:', { title, amount, date });
// ここでは通常、このデータを親コンポーネントやAPIに送信します
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={handleTitleChange} placeholder="Expense Title" />
<input type="number" value={amount} onChange={handleAmountChange} placeholder="Amount" />
<input type="date" value={date} onChange={handleDateChange} />
<button type="submit">Add Expense</button>
</form>
);
};
export default ExpenseForm;これはちょっと難しいかもしれません！ステップバイステップに分解しましょう：
-
useStateをReactからインポートしてフォームの状態を管理します。 -
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)}>Delete</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