如何在链接单击时添加活动 class

Question

我有一个侧边栏组件，我想在onClick()事件上将 active_class_link样式添加到DIV 。 我已经设置了整个 function，但我不知道如何为我拥有的每个DIV执行此操作。

我想像单击一个链接而不是单击任何其他活动 div 时那样工作，应该删除active_class_link样式并将其添加到单击的链接中。

我的侧边栏组件如下，

 import React from 'react'; import { Link } from 'react-router-dom'; import './Sidebar.css'; const Sidebar = ({ sidebarOpen, closeSidebar, handleLogout }) => { let logoUrl = JSON.parse(localStorage.getItem('app_icon')); const handleActive = (e) => { console.log('Adding active to ', e.target); }; return ( <div id='sidebar' className={sidebarOpen? 'sidebar-responsive': ''}> <div className='sidebar_title'> <div className='sidebar_img'> <img src={logoUrl} alt='logo' /> <h1>Admin Panel</h1> </div> <i className='fa fa-times' id='sidebaricon' onClick={closeSidebar}></i> </div> <div className='sidebar_menu'> <div className='sidebar_link ' onClick={(e) => handleActive(e)}> <i className='fa fa-home'></i> <Link to='/home'>Dashboard</Link> </div> <h2>MNG</h2> <div className='sidebar_link ' onClick={(e) => handleActive(e)}> <i className='fas fa-user-circle'></i> <Link to='/profile'>Profile </Link> </div> <div className='sidebar_link ' onClick={(e) => handleActive(e)}> <i className='fas fa-book'></i> <Link to='/subjects'>Subjects </Link> </div> <div className='sidebar_link ' onClick={(e) => handleActive(e)}> <i className='fa fa-graduation-cap'></i> <Link to='/courses'>Courses</Link> </div> <div className='sidebar_link ' onClick={(e) => handleActive(e)}> <i className='fas fa-book-open'></i> <Link to='/notes'>Notes</Link> </div> <div className='sidebar_link ' onClick={(e) => handleActive(e)}> <i className='fas fa-chalkboard-teacher'></i> <Link to='/class'>Online Class</Link> </div> <div className='sidebar_link ' onClick={(e) => handleActive(e)}> <i className='fa fa-handshake-o'></i> <Link to='/contact'>Contact Developer</Link> </div> <h2>LEAVE</h2> <div className='sidebar_logout'> <i className='fa fa-power-off'></i> <Link to='/' onClick={handleLogout}> Log out </Link> </div> <div className='dev' style={{ position: 'absolute', bottom: '20px', left: '8px' }} > <h3 style={{ color: '#51c4d3' }}> Developed by{' '} <i className='far fa-thumbs-up' style={{ fontSize: '1.6rem', marginLeft: '4px' }} ></i> </h3> <h2 style={{ color: '#b0efeb' }}>Codeven Solution</h2> </div> </div> </div> ); }; export default Sidebar;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我的主动Class链接styles如下，

 .active_class_link { border-radius: 6px; background: #19456b; color: #a3ddcb; }

任何可能的解决方案都比请帮助。

Answer 1

如果您将所有Link更改为NavLink ，那么您可以自动添加一个活动的 class 。

<NavLink to='/home' activeClassName="active_class_link">Dashboard</Link>

Answer 2

编辑：检查 Sean 在下面的回答： <NavLink/>元素。 我错过了您可以使用该组件。 如果您想做任何手动操作，那么我会坚持我的回答，但我认为肖恩的回答会为您提供最好的服务......

如果您将.sidebar-menu项设为数据的结果，您将能够更轻松地切换活动的 state。 您应该能够执行以下操作：

import React from 'react';
import { Link } from 'react-router-dom';
import './Sidebar.css';

const Sidebar = ({ sidebarOpen, closeSidebar, handleLogout }) => {
  let logoUrl = JSON.parse(localStorage.getItem('app_icon'));
  const [activeLink, setActiveLink] = React.useState(null);

  const links = [
    {
        id: 0,
        faClass: 'fa fa-home',
        url: '/home',
        title: 'Dashboard',
    },
    {
        id: 1,
        faClass: 'fas fa-user-cirlce',
        url: '/profile',
        title: 'Profile'
    },
    // etc ...
  ];

  return (
    <div id='sidebar' className={sidebarOpen ? 'sidebar-responsive' : ''}>
      <div className='sidebar_title'>
        <div className='sidebar_img'>
          <img src={logoUrl} alt='logo' />
          <h1>Admin Panel</h1>
        </div>
        <i className='fa fa-times' id='sidebaricon' onClick={closeSidebar}></i>
      </div>
      <div className='sidebar_menu'>
      { links.map((link) => (     
            <div className={'sidebar_link' + (activeLink == link.id ? ' active_class_link' : '')} onClick={(e) => setActiveLink(link.id)}>
                <i className={link.faClass}></i>
                <Link to={link.url}>{link.title}</Link>
            </div>
      ))}
      </div>
    </div>
  );
};

export default Sidebar;