React：如何修复按钮组中激活类切换异常问题？

嘿，我来帮你搞定这个按钮组的问题～你现在遇到的核心问题是：两个按钮共用了同一个布尔类型的状态active，所以点击时两个按钮的激活状态会一起切换，完全不符合“互斥激活”的需求。

咱们来一步步修复：

问题根源分析 #

原代码里的state.active是一个单一的布尔值，两个按钮的active类都依赖这个值。点击任意按钮时，这个布尔值会翻转，导致两个按钮的激活状态同时变化，自然就出现了“点一个两个都激活”的情况。

修复方案 #

我们需要把状态改成记录当前激活按钮的标识（比如'left'、'right'或者null表示无激活），让每个按钮单独判断自己是否是当前激活的那个。

修复后的完整代码 #

import cn from 'classnames';
import React from 'react';

class BtnGroup extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态：记录当前激活的按钮，null表示初始无激活
    this.state = { activeBtn: null };
  }

  // 修改方法：接收按钮标识作为参数
  onChangeClass = (btnId) => {
    this.setState(prevState => ({
      // 如果点击的是当前激活的按钮，就取消激活；否则设置为该按钮
      activeBtn: prevState.activeBtn === btnId ? null : btnId
    }));
  };

  render() {
    return (
      <div className="btn-group" role="group">
        {/* 左按钮：判断自己是否是当前激活的按钮，生成对应class */}
        <button
          type="button"
          className={cn(
            'btn btn-secondary left',
            { active: this.state.activeBtn === 'left' }
          )}
          onClick={() => this.onChangeClass('left')}
        >
          Left
        </button>
        {/* 右按钮：同理判断 */}
        <button
          type="button"
          className={cn(
            'btn btn-secondary right',
            { active: this.state.activeBtn === 'right' }
          )}
          onClick={() => this.onChangeClass('right')}
        >
          Right
        </button>
      </div>
    );
  }
}

关键改动说明 #

• 状态设计优化：把active: false改成activeBtn: null，用具体的按钮标识来记录激活状态，而不是单一布尔值。
• 事件处理升级：onChangeClass方法现在接收按钮ID作为参数，通过对比当前激活状态来决定是切换激活还是取消激活。
• 类名判断独立：每个按钮单独判断this.state.activeBtn是否等于自己的标识，这样就能实现互斥激活的效果。
• classnames用法优化：直接在cn函数里组合基础类和条件类，写法更简洁清晰。

这样修改后，点击任意按钮，只有被点击的按钮会变成激活状态，另一个自动恢复非激活，初始状态也保持两个都未激活，完全符合你的需求啦～

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