Reactjs React JS Toogle类

我有一个与React JS一起开发的项目。问题是我有一个按钮，当我点击它时，我只想改变我点击的按钮上的图标。但是我点击的所有按钮上的图标都改变了。我的代码如下

constructor(props){
super(props)
this.state={
    icon: false
}
}

active = (event) => {
    this.setState({icon: !this.state.icon})           
}

.....

const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
    {menu.map((item,index) => 
        <li key = {index}>
            <Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active}>
                <span>
                    <span>
                        <FontAwesomeIcon icon={faHome} className="icon"/>
                    </span>
                    {item}
                </span>
                <FontAwesomeIcon data-id = {index} icon={icon ? faAngleDown:faAngleRight} className="angle"/>
            </Link>
        </li>
    )}
</ul>

构造函数（道具）{
超级（道具）
这个州={
图标：false
}
}
活动=（事件）=>{
this.setState（{icon:！this.state.icon}）
}
.....
常量菜单=['A'、'B'、'C'、'A'、'B'、'C'、'A'、'B'、'C']

{menu.map（（项目，索引）=>

{item}

)}

---

如何解决此问题？

示例如何选择特定的。现场演示

导出默认类Abc扩展组件{
建造师（道具）{
超级（道具）；
this.state={icon:false}；
}
活动=项目=>{
this.setState（{icon:item}）；
};
render（）{
常量菜单=[“A”、“B”、“C”、“A”、“B”、“C”、“A”、“B”、“C”、“A”、“B”、“C”]；
返回(

{menu.map（（项目，索引）=>(
this.active（index）}
style={{color:this.state.icon==索引？“红色”：“}”
>
{item}

))}

);
}
}

只有一个变量是不够的，因为您没有存储已单击的按钮索引以仅准确显示该按钮上的图标

constructor(props){
super(props)
this.state={
    icon: false,
    clickedIndex: -1,
}
}

active = (clickedIndex)=> (event) => {
    this.setState(prevState => ({icon: !prevState.icon, clickedIndex }));          
}

.....

const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
    {menu.map((item,index) => 
        <li key = {index}>
            <Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active(index)}>
                <span>
                    <span>
                        <FontAwesomeIcon icon={faHome} className="icon"/>
                    </span>
                    {item}
                </span>
                <FontAwesomeIcon data-id = {index} icon={(icon && index === this.state.clickedIndex) ? faAngleDown:faAngleRight} className="angle"/>
            </Link>
        </li>
    )}
</ul>

构造函数（道具）{
超级（道具）
这个州={
图标：false，
单击索引：-1，
}
}
活动=（单击索引）=>（事件）=>{
this.setState（prevState=>（{icon:！prevState.icon，clickedIndex}））；
}
.....
常量菜单=['A'、'B'、'C'、'A'、'B'、'C'、'A'、'B'、'C']

{menu.map（（项目，索引）=>

{item}

)}

同样，当我单击列表中的任何链接时，所有链接上的图标都会改变

constructor(props){
super(props)
this.state={
    icon: false,
    clickedIndex: -1,
}
}

active = (clickedIndex)=> (event) => {
    this.setState(prevState => ({icon: !prevState.icon, clickedIndex }));          
}

.....

const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
    {menu.map((item,index) => 
        <li key = {index}>
            <Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active(index)}>
                <span>
                    <span>
                        <FontAwesomeIcon icon={faHome} className="icon"/>
                    </span>
                    {item}
                </span>
                <FontAwesomeIcon data-id = {index} icon={(icon && index === this.state.clickedIndex) ? faAngleDown:faAngleRight} className="angle"/>
            </Link>
        </li>
    )}
</ul>