分享一个我用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()判断,存在这个变量才执行,否则不执行
这样也可以实现这个效果啦~