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

水深无声 2022-01-05 10:57 392阅读 0赞

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

借鉴：yx\_cos博主的[https://blog.csdn.net/yx\_cos/article/details/82499389?tdsourcetag=s\_pctim\_aiomsg][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里的方式，和上面的步骤一样我就不写了  
效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIyNDEzMQ_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIyNDEzMQ_size_16_color_FFFFFF_t_70 1]

[https_blog.csdn.net_yx_cos_article_details_82499389_tdsourcetag_s_pctim_aiomsg]: https://blog.csdn.net/yx_cos/article/details/82499389?tdsourcetag=s_pctim_aiomsg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIyNDEzMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019062320080672.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIyNDEzMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIyNDEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20211229/44968e70f6b34c5c856c23dc620e3f92.png