分享一个我用React实现的一个简单的按钮点击切换样式，实现的效果如下：
实现的思路：
1、样式的切换一般可以通过操作类名切换进而切换样式，也可以通过操作style属性，改变样式。在这里我使用的是通过类名切换来切换样式
2、点击按钮肯定需要绑定点击事件啦，在事件中我们可以通过事件对象event的target获取事件源对象，也就是相应标签。这样在事件发生时就能知道我们点的是哪个按钮啦
3、不要忘记每次点一个按钮后，之前点击的按钮是恢复原状的，这里我们可以在切换样式前，先循环所有标签设置初始的样式
代码如下：
import teststyle from './index.module.css'export default function Test() {// 点击按钮触发的函数：let change=(el)=>{// 获取到所有按钮标签：let arr =document.querySelectorAll(`.${teststyle.button}`)// 循环标签初始化样式：arr.forEach((item)=>{item.className = `${teststyle.button}`})// 针对点击的标签设置改变后的样式： el.target.className = `${teststyle.button} ${teststyle.onbutton}`}return (<><div className={`${teststyle.button}`} onClick={change}>按钮1</div><div className={`${teststyle.button}`} onClick={change}>按钮1</div><div className={`${teststyle.button}`} onClick={change}>按钮1</div><div className={`${teststyle.button}`} onClick={change}>按钮1</div><div className={`${teststyle.button}`} onClick={change}>按钮1</div></>)}
css代码：
.button{color: rgb(44, 44, 44);font-weight: 600;width: 80px;height: 30px;line-height: 30px;border: 1.5px solid rgb(175, 175, 175);border-radius: 5px;margin-right: 5px;text-align: center;cursor: pointer;display: inline-block;}.onbutton{background-color: rgb(137, 144, 247);color: white;}
关于切换类切换样式：
1、首先所有按钮本身是类button，作为初始样式
2、然后，点哪个按钮，给哪个按钮增加onbutton类
3、注意在点击函数中，先执行把所有按钮的类初始为一个button类
优化的反思：
1、之前是每次点击，更改样式前先循环所有的按钮初始化样式，有点浪费性能
2、如果能只更改上次的按钮的样式进行初始就很好
3、每次点击获取上一次点击的按钮并保存下来，这样下一次点击只需要修改上一个按钮的样式就可以了
优化后的代码：
import {useState} from 'react'import teststyle from './index.module.css'export default function Test() {let [lastbutton,setLastbutton] = useState(null);let change=(el)=>{if(lastbutton)lastbutton.className = `${teststyle.button}`el.target.className = `${teststyle.button} ${teststyle.onbutton}`setLastbutton(el.target)}return (<><div className={`${teststyle.button}`} onClick={change}>按钮1</div><div className={`${teststyle.button}`} onClick={change}>按钮2</div><div className={`${teststyle.button}`} onClick={change}>按钮3</div><div className={`${teststyle.button}`} onClick={change}>按钮4</div><div className={`${teststyle.button}`} onClick={change}>按钮5</div></>)}
1、这里利用一个lastbutton变量和useState()，保存上一次点击的按钮标签
2、点击事件函数中，更改完这个标签的类名后，把这个标签保存入lastbutton变量
3、然后在这个函数前，加上lastbutton的类名初始化
4、注意因为第一次点击没有lastbutton，所以加个if()判断，存在这个变量才执行，否则不执行
这样也可以实现这个效果啦~
