ReactJS - Creating an Event-Aware Component
こんにちは、将来のReact開発者たち！今日は、ReactJSにおけるイベント感知コンポーネントの世界に興味深く飛び込んでいきましょう。プログラミングが初めてであっても心配しないでください。あなたの親切なガイドとして、私はここにいますし、ステップバイステップで進めていきます。このチュートリアルの終わりまでに、ユーザーの操作に応じるプロ並みのコンポーネントを作成できるようになるでしょう！
What is an Event-Aware Component?（イベント感知コンポーネントとは何か？）
まず、\"イベント感知\"コンポーネントとは何を指すのかを理解しましょう。パーティーでいると imagine してみてください（私の話に従ってください、これがコードと関係していることを約束します！）。あなたはただそこに立っている像のようにはいません。誰かがジョークを言うと笑い、誰かが食べ物を差し出すとそれを取ります。これがReactにおけるイベント感知コンポーネントが行うことです。ボタンクリックやキーボード入力のようなことが起こることに応じて反応します。
How to Create an Event-Aware Component?（イベント感知コンポーネントの作成方法）
では、袖をまくって、私たちの最初のイベント感知コンポーネントを作成しましょう。まずは簡単なものから – クリック回数を数えるボタンを作成します。
Step 1: Setting Up the Component（コンポーネントの設定）
まず、基本的なReactコンポーネントを作成しましょう：
import React, { useState } from 'react';
function ClickCounter() {
const [count, setCount] = useState(0);
return (
<div>
<button>Click me!</button>
<p>You've clicked {count} times</p>
</div>
);
}
export default ClickCounter;これを分解してみましょう：
- 私たちは 'react' ライブラリから
ReactとuseStateをインポートします。 -
ClickCounterという関数コンポーネントを定義します。 -
useStateヒookを使用して、状態変数countとそれを更新する関数setCountを作成します。 - JSXでボタンと現在のカウントを表示するパラグラフを返します。
Step 2: Adding the Event Handler（イベントハンドラの追加）
次に、ボタンがクリックされたときに実際に何かを行うようにします：
import React, { useState } from 'react';
function ClickCounter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>Click me!</button>
<p>You've clicked {count} times</p>
</div>
);
}
export default ClickCounter;ここで何が新しいのか？
-
handleClick関数を追加し、countを 1 つ増やします。 - ボタンに
onClick属性を追加し、それをhandleClickに設定します。
今、ボタンがクリックされるたびに、handleClick が呼ばれ、カウントが更新されます！
Passing Extra Information to Event Handler（イベントハンドラに追加情報の渡し方）
時々、イベントハンドラに追加情報を渡したいすることがあります。もっと複雑な例を作成してみましょう – クリックした果物の名前をログする果物のリスト。
import React from 'react';
function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
const handleFruitClick = (fruitName) => {
console.log(`You clicked on ${fruitName}`);
};
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index} onClick={() => handleFruitClick(fruit)}>
{fruit}
</li>
))}
</ul>
);
}
export default FruitList;これを解明しましょう：
- 私たちは果物の配列を持っています。
-
handleFruitClick関数はfruitNameパラメータを受け取り、それをログします。 - JSXで
mapを使用して、各果物に対してリストアイテムを作成します。 - 各アイテムの
onClickは、果物の名前を引数に取る関数を設定します。
このようにして、クリックされた果物の名前をイベントハンドラに渡します！
Common Event Handlers in React（Reactにおける一般的なイベントハンドラ）
Reactは広範なイベントハンドラをサポートしています。以下は一般的なものの表です：
| Event Handler | Description |
|---|---|
| onClick | 要素がクリックされたときに発火 |
| onChange | 入力要素の値が変更されたときに発火 |
| onSubmit | フォームが送信されたときに発火 |
| onMouseEnter | マウスが要素にEnterしたときに発火 |
| onMouseLeave | マウスが要素からLeaveしたときに発火 |
| onKeyDown | キーが押されたときに発火 |
| onKeyUp | キーが解放されたときに発火 |
| onFocus | 要素がフォーカスを受け取ったときに発火 |
| onBlur | 要素がフォーカスを失ったときに発火 |
Conclusion（結論）
おめでとうございます！Reactにおけるイベント感知コンポーネントの作成への最初の一歩を踏み出しました。クリックの処理、イベントに基づいて状態を更新し、イベントハンドラに追加情報を渡す基本的なことをカバーしました。
このスキルを習得することはダンスを学ぶのと同じです – 練習が重要です！すぐに理解できない場合（言いたいことを言っています！）も、諦めずにさまざまなインタラクティブなコンポーネントを作成して試してみてください。そうすることで、複雑なユーザーインタラクションをスムーズに choreograph できるようになるでしょう！
私の教え子の多くが、この概念から混乱から自信へと進化してきました。あなたもその仲間入りを果たす道筋を進んでいます。コードを続け、好奇心を持ち、最も重要なのは、楽しむことです！
Credits: Image by storyset