在React组件开发中，多个按钮的动态切换是高频出现的交互场景，比如选项卡切换、状态筛选切换等，使用useState钩子可以非常便捷地实现这类需求，核心思路是通过状态存储当前激活的按钮标识，再根据状态动态渲染按钮的样式与行为。
实现核心思路
要实现多个按钮的动态切换，首先需要明确两个核心点：一是用一个状态变量记录当前被激活的按钮唯一标识，二是给每个按钮绑定点击事件，点击时更新这个状态变量，最后根据状态变量判断每个按钮是否处于激活状态，动态调整对应的样式或者内容。
基础实现步骤
1. 定义状态与按钮数据
首先需要在函数组件中引入useState，定义存储当前激活按钮的状态，同时可以定义按钮的配置数组，方便统一管理按钮的标识、展示文本等信息。
import React, { useState } from 'react';
const ButtonSwitch = () => {
// 定义状态，存储当前激活的按钮id，默认第一个按钮激活
const [activeId, setActiveId] = useState(1);
// 按钮配置数组，包含每个按钮的唯一id和展示文本
const buttonList = [
{ id: 1, text: '选项一' },
{ id: 2, text: '选项二' },
{ id: 3, text: '选项三' },
];
return (
<div className="button-container">
{/* 按钮渲染逻辑后续补充 */}
</div>
);
};
export default ButtonSwitch;
2. 绑定点击事件与动态渲染样式
接下来遍历按钮数组渲染每个按钮，给每个按钮绑定点击事件，点击时调用setActiveId更新激活状态，同时通过判断当前按钮id是否等于activeId，动态添加激活样式类。
import React, { useState } from 'react';
import './ButtonSwitch.css'; // 引入样式文件
const ButtonSwitch = () => {
const [activeId, setActiveId] = useState(1);
const buttonList = [
{ id: 1, text: '选项一' },
{ id: 2, text: '选项二' },
{ id: 3, text: '选项三' },
];
// 处理按钮点击的函数
const handleClick = (id) => {
setActiveId(id);
};
return (
<div className="button-container">
{buttonList.map((item) => (
<button
key={item.id}
className={activeId === item.id ? 'btn active' : 'btn'}
onClick={() => handleClick(item.id)}
>
{item.text}
</button>
))}
</div>
);
};
export default ButtonSwitch;
3. 补充样式文件
对应的CSS样式文件内容如下，定义了普通按钮和激活按钮的样式差异，让切换效果更直观。
.button-container {
display: flex;
gap: 12px;
}
.btn {
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
}
.btn.active {
background-color: #1677ff;
color: #fff;
border-color: #1677ff;
}
进阶场景扩展
如果需要切换时同时触发其他逻辑，比如请求接口、更新其他关联状态，可以在handleClick函数中扩展逻辑，不需要修改状态更新的核心逻辑。
const handleClick = (id) => {
setActiveId(id);
// 扩展逻辑：根据点击的按钮id执行对应操作
if (id === 1) {
console.log('切换到选项一，执行对应逻辑');
} else if (id === 2) {
console.log('切换到选项二，执行对应逻辑');
}
};
注意事项
- 按钮的唯一标识尽量使用不会重复的值，比如后端返回的id，避免使用数组索引作为标识，防止数组顺序变化后出现状态错乱。
- 如果按钮数量较多，可以把按钮配置和点击处理逻辑拆分到单独的文件或者自定义钩子中，保持组件逻辑简洁。
- 动态切换的样式除了类名控制，也可以通过行内样式实现，不过类名控制更便于维护复杂的样式逻辑。