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，然后在乞讨中，没有任何项目可以激活（如果您愿意）。

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

1 个答案: