ReactJS - 創建具有事件感知的組件

你好，未來的 React 開發者們！今天，我們將踏上一段令人興奮的旅程，進入 ReactJS 中的事件感知組件世界。別擔心你對編程還是新手——我將成為你的友好導遊，我們會一步一步地進行。在本教程結束時，你將能夠像專業人士一樣創建有能力回應用戶操作的組件！

什麼是事件感知組件？

在我們深入之前，讓我們先了解所謂的“事件感知”組件是什麼意思。想像你在派對上（請跟著我，這跟編程有關，我保證！）。你並不是像雕像一樣站在那裡——你在對周圍發生的事情做出反應。有人講笑話，你會笑。有人給你食物，你會接受。這正是 React 中的事件感知組件所做的——它會對像按鈕點擊或鍵盤輸入這樣的事情做出反應。

如何創建事件感知組件？

現在，讓我們捋起袖子，創建我們的第一個事件感知組件。我們從一些簡單的東西開始——一個計算被點擊次數的按鈕。

步驟 1：設置組件

首先，我們來創建一個基本的 React 組件：

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

return (
<div>
<button>點我！</button>
<p>你已經點擊了 {count} 次</p>
</div>
);
}

export default ClickCounter;

讓我們來分析一下：

1. 我們從 'react' 库中導入 React 和 useState。
2. 我們定義了一個函數組件叫做 ClickCounter。
3. 在其中，我們使用 useState hook 來創建一個狀態變量 count 和一個更新它的函數 setCount。
4. 我們返回一些 JSX，其中包含一個按鈕和一個顯示當前計數的段落。

步驟 2：添加事件處理器

現在，讓我們讓我們的按鈕在被點擊時真正地做些事情：

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<button onClick={handleClick}>點我！</button>
<p>你已經點擊了 {count} 次</p>
</div>
);
}

export default ClickCounter;

這裡有什麼新東西？

1. 我們添加了一個 handleClick 函數，它會將 count 增加 1。
2. 我們在按鈕上添加了一個 onClick 屬性，將它設置為 handleClick。

現在，每次按鈕被點擊時，handleClick 會被調用，更新我們的計數！

為事件處理器傳遞額外信息

有時候，我們想為我們的事件處理器傳遞額外的信息。讓我們創建一個更複雜的例子——一個水果列表，點擊某個水果會記錄它的名字。

import React from 'react';

function FruitList() {
const fruits = ['蘋果', '香蕉', '櫻桃', '棗'];

const handleFruitClick = (fruitName) => {
console.log(`你點擊了 ${fruitName}`);
};

return (
<ul>
{fruits.map((fruit, index) => (
<li key={index} onClick={() => handleFruitClick(fruit)}>
{fruit}
</li>
))}
</ul>
);
}

export default FruitList;

讓我們來拆解這個：

1. 我們有一個水果數組 fruits。
2. 我們的 handleFruitClick 函數接受一個 fruitName 參數並記錄它。
3. 在我們的 JSX 中，我們使用 map 為每種水果創建一個列表項。
4. 每個項目的 onClick 設置為一個箭頭函數，該函數調用 handleFruitClick 並傳遞水果的名稱。

這樣，當水果被點擊時，我們會將水果的名稱傳遞給事件處理器！

React 中的常見事件處理器

React 支援廣泛的事件處理器。以下是一些常見的事件處理器列表：

事件處理器	描述
onClick	當元素被點擊時觸發
onChange	當輸入元素的值改變時觸發
onSubmit	當表單被提交時觸發
onMouseEnter	當鼠標進入元素時觸發
onMouseLeave	當鼠標離開元素時觸發
onKeyDown	當按鍵被按下時觸發
onKeyUp	當按鍵被釋放時觸發
onFocus	當元素獲得焦點時觸發
onBlur	當元素失去焦點時觸發

結論

恭喜你！你剛剛踏出了創建有事件感知組件的第一步。我們已經介紹了基礎的點擊事件處理、基於事件的狀態更新，甚至還有如何將額外信息傳遞給事件處理器。

記住，變得精通這些技能就像學習舞蹈一樣——需要練習！如果一開始不能立即掌握（開個玩笑），請不要氣餒。繼續嘗試，創建有不同類型的互動組件，很快你就能夠輕鬆地編排複雜的用户交互！

在我多年的教學經驗中，我見過無數學生從困惑到自信的轉變。你正走在加入他們行列的路上。繼續編程，保持好奇心，最重要的是，享受其中的樂趣！

Credits: Image by storyset