在链接组件上设置 onClick 事件处理程序
![在链接组件上设置 onClick 事件处理程序](/img/React/feature-image---react-link-onclick.webp)
设置事件处理程序是构建 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()
挂钩)来实现。
这样,当用户到达一个页面时,你仍然可以执行一个函数。并且导航不会有任何延误。
如果你自己查看示例链接,你会注意到延迟。
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