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

jckbn6z7 于 2023-01-25 发布在 React

关注(0)|答案(3)|浏览(195)

我正在尝试实现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

reactjs

来源：https://stackoverflow.com/questions/75206762/set-onclick-event-on-react-list-nav-bar

3条答案

按热度按时间

nbysray51#

你可以在React中尝试onClick事件，并使用React路由器的useNavigate钩子调用一个函数来重定向到指定的位置，你首先需要安装react路由器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;

赞(0）回复(0）举报 2023-01-25

r9f1avp52#

您只需向MenuItem添加一个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;

赞(0）回复(0）举报 2023-01-25

hfsqlsce3#

〈MenuItems onClick={（）=〉{...}} {... this.props} /〉将onClick处理程序附加为属性。是否定义了MenuItems？我将名称更改为MenuItem。

赞(0）回复(0）举报 2023-01-25