繁体   English   中英

在 React 列表(导航栏)上设置 onclick 事件

[英]Set onclick event on React list (Nav Bar)

我正在尝试将 onclick 实现到导航栏项目中,因此当我单击导航栏中的项目之一时,它将加载一些组件。

下面是导航栏的列表:

 class Navbar extends React.Component { render () { const menuItems = [ { title: 'Home', url: '/', }, { title: 'Assets', url: '/Assets', }, { title: 'Service Report', url: '/Servicereport', }, { title: 'Change Request', url: '/Changerequest', }, { title: 'Logout', url: '/logout', } ]; return ( <nav> <ul className="menus"> {menuItems.map((menu, index) => { return ( <MenuItems items={menu} key={index} /> ); })} </ul> </nav> ); }; } export default Navbar;

我该如何实施? 如果需要更多信息,请告诉我。 谢谢你。

我正在尝试将 onclick 实施到导航栏项目中

你可以在 React 中尝试 onClick 事件,并使用 React Router 的 useNavigate 钩子调用 function 重定向到指定位置。 你首先需要安装 React Router DOM。

npm i react-router-dom

试试下面的重定向代码

 import { useNavigate } from "react-router-dom"; class Navbar extends React.Component { render () { const menuItems = [ { title: 'Home', url: '/', }, { title: 'Assets', url: '/Assets', }, { title: 'Service Report', url: '/Servicereport', }, { title: 'Change Request', url: '/Changerequest', }, { title: 'Logout', url: '/logout', } ]; const navigate = useNavigate(); return ( <nav> <ul className="menus"> {menuItems.map((menu, index) => { return ( <MenuItems onClick = {() => navigate(`${menu.url}`)} items={menu} key={index} /> ); })} </ul> </nav> ); }; } export default Navbar;

您只需向 MenuItems 添加 onclick 属性。

 class Navbar extends React.Component { const handleOnClick = (e) => { if(e.currentTarget == "Something") { // Do something } else { // Do something else } } render () { const menuItems = [ { title: 'Home', url: '/', }, { title: 'Assets', url: '/Assets', }, { title: 'Service Report', url: '/Servicereport', }, { title: 'Change Request', url: '/Changerequest', }, { title: 'Logout', url: '/logout', } ]; return ( <nav> <ul className="menus"> {menuItems.map((menu, index) => { return ( <MenuItems items={menu} key={index} onClick={handleOnClick} /> ); })} </ul> </nav> ); }; } export default Navbar;

<MenuItems onClick={() => {…}} {…this.props} /> 附加 onClick 处理程序作为道具。 是否定义了 MenuItems? 我会将名称更改为 MenuItem。

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM