Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

【DAY 9】事件處理 - 我這人很簡單,有打卡就給讚

cover

[情境劇場]

解師傅:我想到了一個活動,只要來店消費,並且做打卡的動作,就送一盤小菜

小當家:嘿!這主意不錯!分享傳送我們的資訊給大家,原來解師傅也是有在動腦的

解師傅:你是不是沒被我的鋼棍打過?👺


事件處理

在 JavaScript 中,一定很多時候會使用到事件處理,不管是滑鼠事件亦或是鍵盤事件,React 在事件處理上的用法,基本上與 HTML DOM 的處理事件大同小異,幾個不同的地方是:

  • 事件的名稱在 React 中都是 camelCase (小駝峰),而在 HTML DOM 中則是小寫
  • 事件的值在 JSX 中是一個 function,而在 HTML DOM 中則是一個 string

Html DOM

1
2
3
<button onclick="punchCard()">
打卡分享送小菜
</button>

React DOM

1
2
3
<button onClick={punchCard}>
打卡分享送小菜
</button>



  • 需明確呼叫 preventDefault,不能夠使用 return false 來避免瀏覽器預設行為

Html DOM

1
2
3
<form onsubmit="console.log('送小菜'); return false">
<button type="submit">打卡分享</button>
</form>

React DOM

1
2
3
4
5
6
7
8
9
10
11
12
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('送小菜');
}

return (
<form onSubmit={handleSubmit}>
<button type="submit">打卡分享</button>
</form>
);
}



傳遞參數給 Event Handler

在渲染列表時,常常會遇到需要帶入參數的時候,這時候可以使用 arrow function 將參數傳入

1
onClick={(e) => punchCard(name, e)}

e 代表「事件物件」(Event Object),裡面包含了所有與這個事件有關的屬性,並且以「參數」的形式傳給 Event Handler,以下面的範例來看,e 將會以第二個參數被傳遞下去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default function App() {
const menu = ["蘆筍沙拉", "辣炒空心菜", "雞蛋豆腐"];

const punchCard = (name, e) => {
console.log(name);
console.log(e.target);
};

return (
<div>
{menu.map((item) => (
<button
type="button"
key={item}
onClick={(e) => punchCard(item, e)}
>
{item}
</button>
))}
</div>
);
}

情境說明:

  • 點擊按鈕將會在 console 印出名稱與按鈕元素




傳遞 index 更新指定項目

在渲染列表後,我們希望在點擊的那一個項目出現相關提示,這時候可以用索引值 index,以參數方式傳遞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { useState } from "react";

export default function App() {
const menu = ["蘆筍沙拉", "辣炒空心菜", "雞蛋豆腐"];

const [name, setName] = useState("蘆筍沙拉");

const [cardIndex, setCardIndex] = useState();

const punchCard = (name, index) => {
setName(name);
setCardIndex(index);
};

return (
<div>
<h1>
我在 React 熱炒店吃了好好吃的
<span>{name}</span>
,我們一起來吃吧!
</h1>
{menu.map((item, index) => (
<div key={item}>
<h2>
{item}
{cardIndex === index && (<span>已分享給好友</span>)}
</h2>
<button
type="button"
onClick={() => punchCard(item, index)}
>
打卡送小菜
</button>
</div>
))}
</div>
);
}

情境說明:

  • 點擊打卡按鈕會變換名稱,並顯示提示文字「已分享給好友」

useState 詳細介紹將會在下一篇講到,在此大概提一下:

useState 是一個管理狀態的 Hook

cardIndex 為目前事件的 index

setCardIndex 會更新 cardIndex

menu 的 index 會以參數傳入 punchCard,接著 setCardIndex 會更新目前的 cardIndex,只要 menu 的索引值等於 cardIndex,就會跳出「已分享給好友」的字樣



結語

React 事件處理需為小駝峰,也可以將參數帶入函式,明天會來講第一個要介紹的 Hook useState,明天見囉!!


本文為 IT 鐵人賽系列文 你 React 了嗎? 30 天解鎖 React 技能




🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️