按钮点击切换样式（React中实现）

 分享一个我用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 = `${test