如何 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
})
}
最佳答案
实际上,有很多方法可以做到这一点,这里是其中之一。
将点击的 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
inconstructor
我做了一个例子
关于javascript - 将 'active' 类添加到映射项目会导致所有项目都具有事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49725142/