react中实现类似高亮的时候，如何移除其他的className?

Question

问题描述

react项目中实现一个高亮的功能，点击这个DOM的时候，如何移除同级元素的className？

问题出现的环境背景及自己尝试过哪些方法

【环境】:数组循环是在父级中进行循环，循环出来的内容是在子组件中提供。（比如：<li>这个子组件是在父组件中循环出来的，但是<li>这里面的内容是写在子组件中的）

【尝试过的方法】：
1、采用高亮的方法;
2、本来想既然高亮的在子组件中不行，那就在父组件中采用同样的方式去做，只是点击事件挂载在子组件的调用上。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
方法一：

子组件中
constructor () {
    super();
    this.state = {
      active : 0
    }
  }
handleClick = (event)=>{
    this.setState({active: parseInt(event.target.getAttribute('index'), 10)})
}
render() {...
    return (<div onClick={this.handleClick}>...</div>)
}

方法二：

render (){
    let items = list.map(()=>{
        return <TargetSource onClick={this.handleClick} />
    })
    return (
        ...
        xx ? xxx: {items}
    )
}

你期待的结果是什么？实际看到的错误信息又是什么？

【期待的结果】：类似高亮

【实际看到的错误】：
方法一：点击的时候给当前元素加上了高亮的效果，但是其他兄弟元素的高亮效果没有去掉
方法二：点击无任何反应

【后话】：没学React就开始做React项目，只能自己边做边学，所以是个小白，有不对的地方还请指教，不喜勿喷，谢谢。

Answer 1

在遍历的时候把序列带上，和state相比较就可以了
参考以下代码

state = {
    index:0
}
handleClick = (index) => {
    this.setState({index})
}
render (){
    const {index} = this.state;   
    return (
        list.map((el,i)=>{
            return <TargetSource className={index===i?"current":""} onClick={(i)=>this.handleClick(i)} />
        })
    )
}