一、创建变量用来判断是否点击
![](https://i-blog.csdnimg.cn/blog_migrate/1e0b7588e2ed22e86a556c7fcbb95444.png)
二、在render解构赋值,把变量取出来
![](https://i-blog.csdnimg.cn/blog_migrate/338e44db0e79093f46d2cfb0f3612a8f.png)
三、给需要点击的元素添加onClick事件
![](https://i-blog.csdnimg.cn/blog_migrate/3aa409ffa0ef253315ae38e3fdc7e9c6.png)
四、在render下面写点击事件函数,这里用箭头函数
![](https://i-blog.csdnimg.cn/blog_migrate/af799f48ff4ffad206a9650adc22ef67.png)
五、点击的时候在点击事件里修改变量值
![](https://i-blog.csdnimg.cn/blog_migrate/df3b21a35da70b540fc704b43b66b0f9.png)
六、在css里写点击后的样式
![](https://i-blog.csdnimg.cn/blog_migrate/2c6ce42d64a18d46be66abec70772509.png)
七、在className使用三元运算判断(join是把数组所有元素转成字符串)
![](https://i-blog.csdnimg.cn/blog_migrate/3f6d2869b9772b3a83ab78d272b485d5.png)
八、完成
![](https://i-blog.csdnimg.cn/blog_migrate/c4e80a36cb40f0ead6c797451f5e7c02.gif)
一、创建变量用来判断是否点击
二、在render解构赋值,把变量取出来
三、给需要点击的元素添加onClick事件
四、在render下面写点击事件函数,这里用箭头函数
五、点击的时候在点击事件里修改变量值
六、在css里写点击后的样式
七、在className使用三元运算判断(join是把数组所有元素转成字符串)
八、完成