javascript - 在 React 中单击元素时修改 className

问题描述

我在 ReactJS 中创建了一个菜单栏，它具有一些基本的路由功能。组件的 JSX 如下：

class TopBar extends Component {
  state = {
    menus: [{id:0,menu:"Home"}, {id:1,menu:"Contact"}, {id:2,menu:"About"}]
  }
  addClass = e => {
    console.log("Addclass "+ e.target);
  }
  render() {
    return (
      <Router>
                <div>  
                    <nav class="navbar navbar-expand-lg">
                      <div class="row">
                        <div class="col-sm-12">
                          <div class="collapse navbar-collapse">
                            <ul class="navbar-nav mr-auto">
                              {this.state.menus.map((menu,index) =>
                                    <li className="nav-item ng-star-inserted">
                                      <a className={`nav-link ${'active'}`} id={"sample"+ menu.id} onClick={this.addClass} > 
                                        <Link to={menu.menu}> {menu.menu} </Link>
                                      </a>
                                    </li>
                                )}
                            </ul>
                          </div>
                        </div>
                      </div>
                    </nav>

          <Route path="/home" exact component={
            Home
          } />
          <Route path="/contact" exact component={
           Contact
          } />
          <Route path="/about" exact component={
            About
          } />
        </div>
      </Router>
    );
  }
}

CSS：

.navbar .nav-link.active {
    border-bottom: 3px solid #fdd92d;
}

当我单击特定菜单（主页/联系人/关于）时，我希望active将类附加到该特定菜单。我添加了onClick事件并尝试将id属性传递给它。
但是id在调试器中是空白的。

active单击菜单后如何添加类名？

标签： javascriptreactjs

你最好改用 react-router-dom 的NavLink东西。

<NavLink to={menu.menu} activeClassName='active' className='nav-link'>
  {menu.menu}
</NavLink>

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

javascript - 在 React 中单击元素时修改 className

问题描述

解决方案

推荐阅读