在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ react中實現(xiàn)類似高亮的時候，如何移除其他的className?

react中實現(xiàn)類似高亮的時候，如何移除其他的className?

問題描述

react項目中實現(xiàn)一個高亮的功能，點擊這個DOM的時候，如何移除同級元素的className？

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

【環(huán)境】:數(shù)組循環(huán)是在父級中進(jìn)行循環(huán)，循環(huán)出來的內(nèi)容是在子組件中提供。（比如：<li>這個子組件是在父組件中循環(huán)出來的，但是<li>這里面的內(nèi)容是寫在子組件中的）

【嘗試過的方法】：
1、采用高亮的方法;
2、本來想既然高亮的在子組件中不行，那就在父組件中采用同樣的方式去做，只是點擊事件掛載在子組件的調(diào)用上。

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
方法一：

子組件中
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}
    )
}

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

【期待的結(jié)果】：類似高亮

【實際看到的錯誤】：
方法一：點擊的時候給當(dāng)前元素加上了高亮的效果，但是其他兄弟元素的高亮效果沒有去掉
方法二：點擊無任何反應(yīng)

【后話】：沒學(xué)React就開始做React項目，只能自己邊做邊學(xué)，所以是個小白，有不對的地方還請指教，不喜勿噴，謝謝。

回答
編輯回答
不討喜

在遍歷的時候把序列帶上，和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)} />
        })
    )
}
2017年2月3日 01:09