在链接组件上设置 onClick 事件处理程序

Irakli Tchigladze 2023年1月30日 2022年5月18日
  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