在 React 列表（导航栏）上设置 onclick 事件

Question

我正在尝试将 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 实施到导航栏项目中

Answer 1

你可以在 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;

Answer 2

您只需向 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;

Answer 3

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