Javascript 添加'；主动'；类设置为映射项会使所有项的类都处于活动状态

我如何

onClick

仅将类添加到单击的项目中？下面的代码足以添加/删除类

active

，但会添加到mapped`array中的所有项

{tourDetails.map(({ node: questions })=> (
  <div key={questions.id} className="toggle">
    <div onClick={this.handleToggleActive} className={`toggle-title ${this.state.questionActive ? 'active' : ''}`}>
      <h3><i></i><span className="title-name">{questions.question}</span></h3>
   </div>
   <div className={`toggle-inner ${this.state.questionActive ? 'active' : ''}`}
     dangerouslySetInnerHTML={{
       __html:questions.answer.childMarkdownRemark.html,
     }}
   />
  </div>
))}

---

实际上，有很多方法可以做到这一点，这里有一种

将单击的id传递给状态，然后在映射id中压缩它

onClick={this.handleToggleActive.bind(this, questions)} 

我希望您总是使用箭头函数来设置状态

handleToggleActive = (questions) => {
  this.setState({
    questionActive: questions.id
  })
}

将状态与映射中的当前id进行比较

className={`toggle-title ${questions.id === this.state.questionActive ? 'active' : ''}`}

无需在

constructor

我举了个例子

---

很抱歉回到您身边，Liam，但是注意到您的解决方案没有删除

活动的
类
onClick
。想知道你是否知道一个简单的方法来实现这一点。干杯。没问题，我很乐意帮助：-）按双击时是否要删除活动类？何时要删除活动类？谢谢。我正在用作手风琴，想打开和关闭
onClick
。因此，当用户单击添加的活动类时，再次单击会将其删除。但是，在单击其他项目时也会删除活动类。
className={`toggle-title ${questions.id === this.state.questionActive ? 'active' : ''}`}