Javascript 在React JS中单击事件发生的元素中添加类

我有5个这样的列表项，即自我、父母、兄弟姐妹、亲戚、朋友。单击任何项目，我将添加一个名为

activeoption

的类。下面是我的代码，我到目前为止所做的工作。要注意的是，我是一个新手

import React，{Component}来自'React'；
从“react bootstrap”导入{Grid，Col，Row，Button}；
从“../../assets/common/facebook social login.png”导入facebook_login_img；
const profiles createdby=[“自我”、“父母”、“兄弟姐妹”、“亲戚”、“朋友”]；
类寄存器扩展组件{
建造师（道具）{
超级（道具）；
this.state={addClass:false}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.setState（{addClass:！this.state.addClass}）；
}
render（）{
让selectOption=[“option”]；
if（this.state.addClass）{
选择option.push（“活动选项”）；
}
返回(

第1步，共6步

此配置文件由
{profilesCreatedBy.map（（profileCreatedBy，index）=>{
返回
{profileCreatedBy}
;
})}
继续
);
}
}
导出默认寄存器；

我正在使用地图功能显示所有项目。我尝试将名为

activeoption

的类添加到

option

。但是，单击任何项目都会将该类添加到其他每个项目中。有什么建议吗？我想将活动选项类添加到发生单击事件的那个类，而不是添加到其他每个元素。同级不应包含活动选项类。请帮忙

---

您可以通过将活动项id保持在组件状态来实现这一点，例如：

class Test extends React.Component{
    constructor(){
        super();
        this.state = {
            activeId: null
        }
        this.setActiveElement = this.setActiveElement.bind(this);
    }
    setActiveElement(id){
        this.setState({activeId: id})
    }
    render(){
        return(
            <div>
                {
                    [1,2,3,4,5].map((el, index) => 
                        <div className={index === this.state.activeId? "active" : ""} onClick={() => this.setActiveElement(index)}>click me</div> 
                    )
                 }
            </div>
        )
    }
}

类测试扩展了React.Component{
构造函数（）{
超级（）；
此.state={
activeId:null
}
this.setActiveElement=this.setActiveElement.bind（this）；
}
setActiveElement（id）{
this.setState（{activeId:id}）
}
render（）{
返回(
{
[1,2,3,4,5]。地图（（el，索引）=>
this.setActiveElement（index）}>单击我
)
}
)
}
}

---

您可以通过将活动项id保持在组件状态来实现这一点，例如：

class Test extends React.Component{
    constructor(){
        super();
        this.state = {
            activeId: null
        }
        this.setActiveElement = this.setActiveElement.bind(this);
    }
    setActiveElement(id){
        this.setState({activeId: id})
    }
    render(){
        return(
            <div>
                {
                    [1,2,3,4,5].map((el, index) => 
                        <div className={index === this.state.activeId? "active" : ""} onClick={() => this.setActiveElement(index)}>click me</div> 
                    )
                 }
            </div>
        )
    }
}

类测试扩展了React.Component{
构造函数（）{
超级（）；
此.state={
activeId:null
}
this.setActiveElement=this.setActiveElement.bind（this）；
}
setActiveElement（id）{
this.setState（{activeId:id}）
}
render（）{
返回(
{
[1,2,3,4,5]。地图（（el，索引）=>
this.setActiveElement（index）}>单击我
)
}
)
}
}