React按钮激活状态切换：点击切换激活状态并更换图标

嘿，别担心！刚接触React和UI开发遇到这类问题太正常啦😉 你要实现的其实是单选按钮组的效果——同一时间只有一个按钮处于激活状态，激活时显示对应图标，点击其他按钮就切换过去。我帮你梳理下实现思路和代码优化方案：

• 状态简化：你的cSelected是数组，但单选场景下只需要记录当前激活按钮的唯一标识（比如字符串/数字）就够了，不用数组，逻辑会更清晰。
• 点击切换：给每个按钮绑定点击事件，点击时把当前按钮的标识更新到状态中。
• 图标与状态联动：渲染按钮时，根据当前激活状态判断显示激活/非激活图标，同时给按钮添加激活样式。

假设你用自定义图标组件（也可以替换成字体图标如Font Awesome），代码如下：

import React, { Component } from 'react';
// 导入你的图标组件（示例）
import ActiveHomeIcon from './icons/ActiveHome';
import InactiveHomeIcon from './icons/InactiveHome';
import ActiveSettingIcon from './icons/ActiveSetting';
import InactiveSettingIcon from './icons/InactiveSetting';

export class ABC extends Component {
  configFile = require('../../resources/stubs/config.json');

  constructor(props) {
    super(props);
    this.state = {
      // 用单个值记录当前激活按钮，初始可设第一个按钮或null
      activeBtn: 'home',
      isHidden: true,
      level: this.configFile.Level,
      amount: this.configFile.Amount // 补全你原代码的变量
    };
  }

  // 按钮点击处理函数
  handleBtnClick = (btnKey) => {
    this.setState({ activeBtn: btnKey });
  };

  // 根据按钮标识和激活状态返回对应图标
  getBtnIcon = (btnKey) => {
    const { activeBtn } = this.state;
    const isActive = activeBtn === btnKey;

    switch(btnKey) {
      case 'home':
        return isActive ? <ActiveHomeIcon /> : <InactiveHomeIcon />;
      case 'setting':
        return isActive ? <ActiveSettingIcon /> : <InactiveSettingIcon />;
      // 可继续扩展更多按钮的图标逻辑
      default:
        return null;
    }
  };

  render() {
    const { activeBtn } = this.state;

    return (
      <div className="button-group">
        {/* 首页按钮 */}
        <button
          className={`btn ${activeBtn === 'home' ? 'active' : ''}`}
          onClick={() => this.handleBtnClick('home')}
        >
          {this.getBtnIcon('home')}
          <span>首页</span>
        </button>

        {/* 设置按钮 */}
        <button
          className={`btn ${activeBtn === 'setting' ? 'active' : ''}`}
          onClick={() => this.handleBtnClick('setting')}
        >
          {this.getBtnIcon('setting')}
          <span>设置</span>
        </button>
      </div>
    );
  }
}

• 动态渲染按钮：如果你的按钮是从configFile里动态配置的，可以用map循环生成，避免重复代码：

  // 假设configFile里有buttons数组：[{key: 'home', name: '首页'}, {key: 'setting', name: '设置'}]
  render() {
    const { activeBtn } = this.state;
    const { buttons } = this.configFile;
  
    return (
      <div className="button-group">
        {buttons.map(btn => (
          <button
            key={btn.key}
            className={`btn ${activeBtn === btn.key ? 'active' : ''}`}
            onClick={() => this.handleBtnClick(btn.key)}
          >
            {this.getBtnIcon(btn.key)}
            <span>{btn.name}</span>
          </button>
        ))}
      </div>
    );
  }
  

• 样式增强：在CSS里给.active类设置特殊样式（比如背景色、边框、图标颜色），让激活状态更明显：

  .btn.active {
    background-color: #2196F3;
    color: white;
    border-color: #2196F3;
  }
  

内容的提问来源于stack exchange，提问作者Pink