ReactJS - 事件管理

你好，未来的React开发者們！今天，我們將深入ReactJS中令人興奮的事件管理世界。作為你們友好的鄰居計算機科學老師，我非常興奮能夠帶領你們進行這次旅程。別擔心你們是編程新手——我們會從基礎開始，然後逐步提升。所以，來一杯咖啡（或者茶，如果你喜歡的話），我們開始吧！

ReactJS - Event management

ReactJS中的事件管理

事件是交互式網頁應用程序的生命線。它們就像是飛船駕駛艙中的按鈕和操縱桿——它們讓事情發生！在ReactJS中，事件管理是我們如何處理用戶交互，如點擊、按鍵和表單提交。

想像你正在建立一個簡單的點擊遊戲。每次用戶點擊按鈕，你都想增加一分。這就是事件管理派上用場的地方！

React的合成事件

在我們深入代碼之前，讓我們先來談談React中的一個獨特概念：合成事件。這是React確保事件在不同瀏覽器中一致工作的方式。這就像為你的應用程序擁有一個萬用翻譯器！

React包住了瀏覽器的原生事件，並給它們一個一致的接口。這意味著在處理事件時，你不必擔心瀏覽器特定的怪異行為。

添加事件

讓我們從一個簡單的例子開始。我們將創建一個按鈕，當點擊時，會顯示一個警告。

function AlertButton() {
return (
<button onClick={() => alert('你點擊了我！')}>
點擊我！
</button>
);
}

在這個例子中：

我們定義了一個函數組件叫做AlertButton。
在組件內部，我們返回一個<button>元素。
我們為按鈕添加了一個onClick屬性。這是我們在React中附加事件監聽器的方式。
onClick屬性被設定為一個箭頭函數，該函數調用alert()並傳入我們的消息。

當你渲染這個組件並點擊按鈕時，你會看到一個彈出窗口說“你點擊了我！”。

處理事件

現在，讓我們來讓事情更有趣一些。我們不僅僅是顯示一個警告，我們還會在按鈕被點擊時更新組件的狀態。

import React, { useState } from 'react';

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

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

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

讓我們分解一下：

我們從React中導入useState來管理我們組件的狀態。
我們定義了一個函數組件叫做ClickCounter。
在組件內部，我們使用useState(0)來創建一個狀態變量count，初始化為0，並且有一個函數setCount來更新它。
我們定義了一個handleClick函數，該函數調用setCount來增加計數。
在我們的JSX中，我們顯示當前計數和一個按鈕。
按鈕的onClick屬性被設定為我們的handleClick函數。

每次你點擊按鈕，計數將增加1！

為事件處理器傳遞參數

有時候，你可能想要為你的事件處理器傳遞額外的信息。讓我們看一個例子，我們有多個按鈕，每個按鈕都與不同的水果相關聯。

import React, { useState } from 'react';

function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('');

const handleFruitClick = (fruit) => {
setSelectedFruit(fruit);
};

return (
<div>
<h2>選擇一種水果：</h2>
<button onClick={() => handleFruitClick('Apple')}>蘋果</button>
<button onClick={() => handleFruitClick('Banana')}>香蕉</button>
<button onClick={() => handleFruitClick('Cherry')}>櫻桃</button>
<p>你選擇了：{selectedFruit}</p>
</div>
);
}

在這個例子中：

我們創建了一個狀態變量selectedFruit來跟踪選定的水果。
我們的handleFruitClick函數接受一個fruit參數。
在每個按鈕的onClick屬性中，我們使用箭頭函數調用handleFruitClick並傳入相應的水果名稱。

當你點擊一個按鈕時，它會更新selectedFruit狀態為你所點擊的水果名稱。

常見的React事件

這裡有一些你可能會使用的常見React事件表：

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

記住，這些事件在React中是駝峰式的，與它們的小寫HTML對應事件不同。

好了，各位！你們已經開始踏上了React事件管理世界的第一步。用這些例子練習，嘗試結合不同的概念，很快你就能夠像專業人士一樣創建有交互性的React應用程序！

記住，在編程中，就像在生活中一樣，關鍵是持續實驗和學習。不要害怕犯錯誤——它們只是通向成功的踏腳石。快樂編程，願React與你同在！

Credits: Image by storyset