在地图项目上添加活动类反应答案

【问题标题】：Add active class on a map items react在地图项目上添加活动类反应
【发布时间】：2019-09-30 12:29:48
【问题描述】：

映射我的数组后，如果用户单击 1 个元素，我想添加一个活动的 css 类。

我的地图原型：

 publicationsPages.map((mod, i) => (
  <div onClick={e => this.addActiveClass(i, e)} className= 
  {`${activeClasses[i] ? "active" : "inactive"} ${classes.modcontainer} 
  modcontainer`}>
    <p className={`${classes.menuitems} menuitems`}>
      {t(`Publications.${mod.name}`).toUpperCase()}
    </p>
   </div>
))

我尝试了一种名为 addActiveClass 的方法和一个状态：

this.state={activeClasses: [false, false, false, false]}

 addActiveClass(index) {
      const result = [...this.state.activeClasses.slice(0, index), !this.state.activeClasses[index], this.state.activeClasses.slice(index + 1)];
      this.setState({activeClasses: result});
  }

但这不起作用。提前感谢您的帮助

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

单击元素时，您将保持所选项目的索引状态。在item中可以检查索引是否与状态中的索引相同，并添加活动类。

publicationsPages.map((mod, i) => (
    <div 
        onClick={e => this.setState({activeIndex: i)}} 
        className= {`${i == this.state.activeIndex ? "active" : "inactive"}
    >
        ...
    </div>
))

activeIndex 的默认（或初始）值应该是 -1，然后在乞求中，我不会激活任何项目（如果你想要的话）。

【讨论】：