将“活动”类添加到映射项会导致所有项都具有活动类

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传递给状态，然后在地图ID中进行匹配。

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

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

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

使用地图

中的当前ID来控制状态

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

  

无需在handleToggleActive

中绑定constructor

我做了一个例子