在連結元件上設定 onClick 事件處理程式

1. React 中的 Link 元件
2. 在 React 中處理 Link 元件的 onClick 事件

設定事件處理程式是構建 React 應用程式的重要部分。

onClick 是最常見的事件之一，通常在 <button> 和 <span> 元素上定義。在本文中，我們將為 Link 元件設定一個事件處理程式。

React 中的 Link 元件

React Router 是 React 中用於配置導航的主要庫。

它為你提供了構建導航系統所需的所有構建塊。Link 是 React Router 提供的最重要的元件之一。

這個元件是 HTML 中的 <a> 標籤的一個更高階的替代品。人們經常使用 Link 元件來構建導航選單或應用內頁面的一次性連結。

該元件接受許多 props，但 to 可能是最重要的。這個 props 允許我們指定相對於主頁的路徑，Link 元件應該在哪裡導航。

讓我們看一個例子：

<Link to="/contact">Contact Us</Link>

假設我們的主頁是 www.homepage.com，單擊此連結會將我們帶到 www.homepage.com/contact。當點選事件發生時，Link 元件的預設行為是導航到指定的路徑。

但是，如果我們想要執行預設行為之外的其他操作怎麼辦？

onClick 屬性

Link 元件還接受 onClick 屬性，該屬性應設定為等於花括號內的處理函式（或對它的引用）。讓我們看一個簡單的例子：

import "./styles.css";
import { Link, BrowserRouter } from "react-router-dom"
export default function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Link to="/page" onClick={() => alert("boo")}>Clickable Link</Link>
    </div>
    </BrowserRouter>
  ); 
}

在這個簡單的例子中，我們有一個 Link 元件。

根據預設行為，單擊它將帶我們到 /page 路線。但是，由於我們指定了 onClick 屬性，它也將充當事件處理程式。

在這種情況下，它會提示一個簡單的文字。你可以檢視 codesandbox 自己嘗試一下。

請注意，花括號是必要的，以確保它們之間的表示式被視為有效的 JavaScript。

在 React 中處理 Link 元件的 onClick 事件

除非你 100% 確定你的 Link 元件需要 onClick 事件處理程式，否則最好以其他方式操作。

設定一個單獨的事件處理程式將延遲導航並首先破壞使用 Link 元件的目的。導航將被延遲，因為元件將首先執行事件處理程式並隨後導航路徑。

不過，有時你需要在使用者到達你應用的特定頁面時執行特定操作。你可以通過更改新元件的 componentDidMount() 生命週期方法（或 useEffect() 掛鉤）來實現。

這樣，當使用者到達一個頁面時，你仍然可以執行一個函式。並且導航不會有任何延誤。

如果你自己檢視示例連結，你會注意到延遲。