React侧边栏点击链接如何正确设置active_menu激活样式

选中状态无法正常切换来自两个核心错误：

• 类组件中访问state属性未加this.state.前缀：渲染逻辑里直接写selected、active_menu、inactive_menu、idUser，无法读取到state更新后的值，始终只能拿到初始值。
• 原生<a>标签点击会触发默认页面跳转刷新：点击链接时页面直接重载，React组件状态会被重置为初始值selected:0，状态更新逻辑还没生效就被刷新打断。
• 额外笔误：你写的<bi>标签不符合规范，Bootstrap Icon的图标标签是标准的<i>标签。

1. 修正事件处理逻辑，阻止a标签默认跳转 #

修改handleClick方法，先阻止默认跳转行为，更新状态后再执行路径跳转，避免页面刷新重置状态：

state = {
  idUser: parseInt(localStorage.getItem('idUser')),
  user: '',
  selected:0,
  // 注意：固定样式不需要放在state里，后续优化可移出
  active_menu : {
    backgroundColor: '#044b9e',
    paddingTop: '12px',
  },
  inactive_menu : {},
}

// 修正handleClick写法，接收事件对象阻止默认行为
handleClick = (num, e) => {
  e.preventDefault();
  // 路径映射表，和菜单顺序一一对应
  const pathMap = [
    `/user`,
    `/user`,
    `/listeDemande/${this.state.idUser}`,
    `/listeQuestion/${this.state.idUser}`
  ]
  this.setState({
    selected: num
  }, () => {
    // 状态更新完成后再跳转，如果使用react-router等单页路由，替换为路由跳转方法即可避免页面刷新
    window.location.href = pathMap[num]
  })
};

2. 修正渲染逻辑的state访问方式 #

所有state中的属性访问都要加this.state.前缀，同时修正图标标签、onClick绑定写法：

<a 
  style={this.state.selected == 0 ? this.state.active_menu : this.state.inactive_menu} 
  onClick={(e) => this.handleClick(0, e)} 
  className='row item_menu_user_' 
  href={`/user`}
>
  <i className="bi items bi-person-circle"></i>
  <span className='item'>Mon profil</span>
</a>
        
<a 
  style={this.state.selected == 1 ? this.state.active_menu : this.state.inactive_menu} 
  onClick={(e) => this.handleClick(1, e)} 
  className='row item_menu_user_' 
  href={`/user`}
>
  <i className="bi items bi-bell-fill"></i>
  <span className='item'>Notifications</span>
</a>
        
<a 
  style={this.state.selected == 2 ? this.state.active_menu : this.state.inactive_menu} 
  onClick={(e) => this.handleClick(2, e)} 
  className='row item_menu_user_'  
  href={`/listeDemande/${this.state.idUser}`}
>
  <i className="bi items bi-arrow-up-right-circle"></i>
  <span className='item'>Mes Demandes</span>
</a>
        
<a 
  style={this.state.selected == 3 ? this.state.active_menu : this.state.inactive_menu} 
  onClick={(e) => this.handleClick(3, e)} 
  className='row item_menu_user_' 
  href={`/listeQuestion/${this.state.idUser}`}
>
  <i className="bi items bi-question-circle"></i>
  <span className='item'>Mes Questions</span>
</a>

• 固定的active_menu、inactive_menu属于静态常量，不需要放在state中做响应式监听，可以直接提到组件外部定义，减少不必要的性能消耗。
• 更推荐使用CSS类名切换代替内联样式，可维护性更高：

  .item_menu_user_.active {
    background-color: #044b9e;
    padding-top: 12px;
  }
  

  渲染时直接拼接类名即可，不需要额外写内联样式判断：

  <a 
    className={`row item_menu_user_ ${this.state.selected === 0 ? 'active' : ''}`} 
    onClick={(e) => this.handleClick(0, e)} 
    href={`/user`}
  >
  

• 如果项目使用React Router，建议将原生<a>标签替换为<Link>组件，跳转时不会刷新页面，状态不会丢失，体验更好。

内容的提问来源于stack exchange，提问作者MissNdeya