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

Question

映射我的数组后，如果用户单击 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});
  }

但这不起作用。预先感谢您的帮助

Answer 1

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

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

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