react 循环嵌套 改变样式 点击变色

react 循环嵌套 改变样式 点击变色

借鉴：yx_cos博主的https://blog.csdn.net/yx_cos/article/details/82499389?tdsourcetag=s_pctim_aiomsg

因为react没有办法修改this.state里的值
所以运用sessionStorage当然（localStorage也可以）改变完值在赋值给this.state

第一步、一个点击事件（listClick）往点击事件里传入第一层下标，第二层下标
数据是请求过来的就不写了

{
    this.state.shopData.map((item, index) => {
        return (
            <div key={item.attrid}>
                <div  className="s_m_r_tite">
                    {item.title}
                </div>
                <div >
                {
                item.param.map((itemer, indexer) => {
                    return <span key={itemer.pid}
                        onClick={this.listClick.bind(this, index, indexer)}
                        id={JSON.parse(sessionStorage.getItem('li'))[index] === indexer? "s_m_r_cont-bo" : ""}
                    >{itemer.title}
                    </span>
                })
                }
                </div>
            </div>
        )
    })
}

第二步、在componentDidMount默认在sessionStorage里设置一个空数组

componentDidMount(){
    //默认在sessionStorage里设置一个空数组用来放点击的下标
		sessionStorage.setItem('li', JSON.stringify([]))
}

第三步、在点击函数里（listClick）

listClick(index, indexer) {
		//获取到sessionStorage里的数据
		//因为react不能用 this.lIData[index] = indexer这种形式的赋值
		//所以用sessionStorage里的数据来实现赋值
		let data = JSON.parse(sessionStorage.getItem('li'))
		data[index] = indexer
		sessionStorage.setItem('li', JSON.stringify(data))
	
		this.setState({
			lIData: data;//必须写用来判断点击第二次相同的时候
		})

		//根据react异步的原理，第二次点击时，两数据一样让span变为灰色（未选中）
		if(data[index] === this.state.lIData[index]) {
			this.setState({
				lIData: []
			})
        //并且改变sessionStorage里的数据
			data[index] = -1
			sessionStorage.setItem('li', JSON.stringify(data))
		}
	}

如果需要点击时显示对应的文字也是用sessionStorage里的方式，和上面的步骤一样我就不写了
效果