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

Irakli Tchigladze 2023年1月30日
  1. React 中的 Link 元件
  2. 在 React 中處理 Link 元件的 onClick 事件
在連結元件上設定 onClick 事件處理程式

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

onClick 是最常見的事件之一,通常在 <button><span> 元素上定義。在本文中,我們將為 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。

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

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

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

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

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

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Event