如何在鏈接單擊時添加活動 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;