javascript - 将 'active' 类添加到映射项目会导致所有项目都具有事件类

Question

如何 onClick 将类仅添加到单击的项目？下面的代码足以添加/删除类active，但会添加到映射的`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>
))}

通过将组件中的状态设置为来添加 Active 类

constructor(props) {
  super(props);
  this.state = {
    questionActive: false
  }
  this.handleToggleActive = this.handleToggleActive.bind(this)
}

handleToggleActive() {
  this.setState({
    questionActive: !this.state.questionActive
  })
}

Answer 1

实际上，有很多方法可以做到这一点，这里是其中之一。

将点击的 id 传递给州，然后与 map id 进行比较。

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

我更喜欢你总是使用箭头函数来设置状态

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

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

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

No need to bind handleToggleActive in constructor

我做了一个例子