終究都要學 React 何不現在學呢？ - React 基礎 - 事件處理 - (5)

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
接著來聊聊 React 的事件處理，畢竟事件處理這件事情我們在開發上是非常常見的。

前言

接著來聊聊 React 的事件處理，畢竟事件處理這件事情我們在開發上是非常常見的。

Vue 事件處理

一開始我們先來快速聊一下 Vue 的部分。

Vue 本身是採用 v-on:事件名稱="函式" 的概念撰寫，以點擊事件(click)並觸發一個打招呼函式(sayHi)當作舉例

1
<a href="https://israynotarray.com/" v-on:click="sayHi">點我</a>

但是實戰上其實我們很少寫 v-on: 大多都是使用事件修飾符 「@」來取代 v-on:

1
<a href="https://israynotarray.com/" @click="sayHi">點我</a>

而上方就是我們最基本使用 Vue 的事件處理方式。

Vue 事件修飾符

上面的範例你會發現當你點了之後會先跳出警告視窗，之後畫面就被個轉到我的部落格 (其實這是一個計畫通概念)

部落格

其實這個問題是連結本身有預設行為的關係，也就是重新轉址導向至 href 網址，如同使用表單送出時的 action 路徑相同，如果要解決這個問題的話，我們就要使用 Vue 的「事件修飾符」，那麼事件修飾符非常多，所以這邊就只介紹一個也就是 .prevent，只要你在 @click 後方補個 .prevent 就可以解決重新轉址導向的問題

1
<a href="https://israynotarray.com/" @click.prevent="sayHi">點我</a>

透過事件修飾符就可以避免我們點擊連結就會跳轉的問題了。

前面這邊快速回顧與了解 Vue 的事件處理、事件修飾符後，React 呢？React 又是如何呢？所以我們接著下去。

React 事件處理

前面我們快速了回顧 Vue 的事件處理方式都是使用 v-on: 與 @ 來處理，那 React 呢？React 的事件稍微有一點點特別，但是如果你寫過 onclick 這種事件觸發的方式，那麼你會覺得 React 事件處理方式很熟悉

1
<a href="https://israynotarray.com/" onclick="sayHi(event)">點我</a>

上面這個 onclick 範例稱之為「Inline events」，通常會是 on+[事件名稱]="函式()"，而實戰開發上我們也會盡可能避免使用 Inline events 的方式來綁定事件，原因是什麼就不細談了，因為這不是這一次主題要討論的範圍內。

拉回到 React 的事件處理。

為什麼要特別提到 「Inline events」 這件事情呢？主要原因是 React 事件處理寫法與與 「Inline events」 有高度的 87% 神似，讓我們看一下 React 的 Click 事件怎麼寫

1
<a href="https://israynotarray.com/" onClick={ sayHi }>點我</a>

雖然 Inline events 與 React 事件處理的方式有高達 87% 神似，但是 React 的撰寫方式則是 on+[事件名稱]={ 函式 }，事件名稱首字會是大寫且採用 camelCase 方式。

所以我們簡單列一下 Inline events 與 React 事件處理的兩者差異

  • Inline events 採用全小寫形式，React 事件處理則是 camelCase
  • Inline events 傳入的是一個字串(String)，React 事件處理傳入的是一個函式

React 事件修飾符？

這時候你可能會好奇了…

React 會跟 Vue 一樣擁有事件修飾符嗎？如果有的話，是不是應該這樣寫 onClick.prevent={ sayHi }？

你真的非常聰明呢！恭喜你答案是…

沒有這個東西！

原因很簡單 React 本身寫起來就像是在寫純粹的 JavaScript，因此你必須明確的呼叫 preventDefault(); 才可以避免預設行為的觸發

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const App = () => {
  const sayHi = (e) => {
    e.preventDefault()
    window.alert('Hello！');
  }

  return (
    <div>
      <a href="https://israynotarray.com/" onClick={ sayHi }>點我</a>
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);

這也是為什麼可以常常聽到人家說寫 React 彷彿在寫純粹的 JavaScript 一樣。

那麼這邊我也簡單列一下 React 常見的事件處理：

  • onClick
  • onChange
  • onSubmit
  • onKeyDown
  • onFocus
  • onBlur

請切記 React 的撰寫方式則是 on+[事件名稱]="{ 函式 }"，絕對不是 on+[事件名稱]="名稱()" 這種！

單看文字上的描述其實是很難理解每一個事件處理的運作，因此後面我會針對每一個事件處理寫一個範例。

onClick

前面我們已經撰寫了無數次關於 onClick 事件的範例，儘管如此我們還是要再看一次 onClick 盡可能地去熟悉這種寫法，讓它深刻的刻畫在腦袋中

onClick 是一個很基本的點擊事件，當你點擊之後會觸發你所傳入的函式，如果你不傳入任何參數，而是單純的傳入一個函式名稱，那麼預設就會傳入一個 evnet (點擊事件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const App = () => {
  const handler = (event) => {
    event.preventDefault()
    window.alert('Click！');
  }

  return (
    <div>
      <a href="https://israynotarray.com/" onClick={ handler }>點我</a>
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);

(對應的是 Vue @click 事件)

onChange

onChange 事件最常用於 input、textarea 及 select 元素上，舉例來講，當我們選擇了 select 某個資料時，則會取得 option 內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const App = () => {
  const handler = (event) => {
    window.alert(`你選擇了：${event.target.value}`);
  }

  return (
    <div>
      <select onChange={ handler } name="location">
      　<option value="Taipei">台北</option>
      　<option value="Taoyuan">桃園</option>
      　<option value="Hsinchu">新竹</option>
      </select>
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);

(對應的是 Vue @Change 事件)

onSubmit

onSubmit 主要用於 form 表單上，而表單基本上有三劍客 Form、輸入欄位、Submit 按鈕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const App = () => {
  const handlerSubmit = (e) => {
    e.preventDefault();
    window.alert('submit');
  }

  return (
    <div>
      <form onSubmit={ handlerSubmit }>
        <label htmlFor="account">帳號</label>
        <input id="account" type="text" />
        <button type="submit">送出</button>
      </form>
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);

請注意 label 上的 for 屬性必須改寫成 htmlFor，否則會出現「Warning: Invalid DOM property for. Did you mean htmlFor?」這一段錯誤訊息，而這一個錯誤是因為 JSX 本身也是 JavaScript，因此剛剛好 for 會與 JavaScript 的保留字 for loop 有所衝突，因此要額外更改名稱。

(對應的是 Vue @Submit 事件)

onKeyDown

除了 onSubmit、onChange 之外，另一個常見的監聽就是 onKeyDown ，如果你是在實作一個 ToDoList 之類的小東西，那麼 onKeyDown 就必定會很常使用，例如監聽目前按什麼按鍵

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const App = () => {
  const handler = (e) => {
    e.preventDefault();
    window.alert(`你按下了${e.key} 按鍵，按鈕是 ${e.keyCode}`);
  }

  return (
    <div>
       <input type="text" onKeyDown={ handler } />
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);

(對應的是 Vue @keyup 事件)

onFocus

onFocus 使用場景大多常見於輸入匡，只要我們關注那個欄位就會觸發事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const App = () => {
  const handlerFocus = () => {
    window.alert('Focus');
  }

  return (
    <div>
       <input type="text" onFocus={ handlerFocus } />
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);

(對應的是 Vue @focus 事件)

onBlur

Foucs 是關注的話，那麼 Blur 就是離開關注的時候會觸發

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const App = () => {
  const handlerBlur = (e) => {
    window.alert('Blur');
  }

  return (
    <div>
       <input type="text" onBlur={ handlerBlur } />
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);

(對應的是 Vue @blur 事件)

那麼以上差不多就是常見的事件處理的部分。

後記

本文將會同步更新到我的部落格