React中实现Toggle Button Group：Electron绘图应用工具栏状态管理

嗨，作为React新手，你遇到的这个问题其实是React里非常典型的状态提升场景——把原本分散在子组件的状态，提到父组件里统一管理，这样就能轻松实现你要的“选中一个按钮，取消其他所有主按钮激活状态”的效果啦。下面我一步步给你改代码，帮你搞懂这个思路：

第一步：改造ToolbarButton组件，让它成为受控组件 #

首先，我们要把ToolbarButton自己的active状态去掉，改成从父组件接收active属性，点击事件也交给父组件来处理（因为父组件要知道哪个按钮被点击了，从而更新全局的选中状态）。

修改后的ToolbarButton代码：

import React from 'react';

class ToolbarButton extends React.Component {
  // 移除自身的active状态，完全由props控制
  handleClick = ()=> {
    // 调用父组件传递过来的点击回调，把当前按钮的标识传回去
    if(this.props.onClick) {
      this.props.onClick(this.props.toolKey);
    }
  }

  render(){
    // 从props获取active状态，决定是否添加active类
    return (
      <div 
        className={`btn btn-primary${this.props.active ? ' active' : ''}`} 
        onClick={this.handleClick}
      >
        {this.props.children}
      </div>
    )
  }
}

第二步：在CanvasToolbar中统一管理选中状态 #

接下来，在父组件CanvasToolbar里添加状态，记录当前选中的工具按钮标识，然后写一个处理点击的方法，更新这个状态：

修改后的CanvasToolbar代码：

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { ButtonGroup } from 'react-bootstrap';
import ToolbarButton from './ToolbarButton'; // 确保组件路径正确
import ColorPickerButton from './ColorPickerButton';

export class CanvasToolbar extends React.Component {
  // 初始化状态，保存当前选中的工具key，默认null表示无选中
  state = {
    selectedTool: null
  }

  // 处理工具按钮点击的方法，接收被点击的工具key
  handleToolClick = (toolKey) => {
    // 可选：如果点击的是当前已选中的按钮，可取消选中（也可以保持选中，按需调整）
    this.setState({
      selectedTool: toolKey === this.state.selectedTool ? null : toolKey
    });
  }

  render(){
    return (
      <div className="CanvasToolbar">
        <ButtonGroup vertical>
          {/* 给每个ToolbarButton传递唯一标识、active状态和点击回调 */}
          <ToolbarButton 
            toolKey="brush"
            active={this.state.selectedTool === "brush"}
            onClick={this.handleToolClick}
          >
            <FontAwesome name='paint-brush' />
          </ToolbarButton>
          <ToolbarButton 
            toolKey="eraser"
            active={this.state.selectedTool === "eraser"}
            onClick={this.handleToolClick}
          >
            <FontAwesome name='eraser' />
          </ToolbarButton>
          <ToolbarButton 
            toolKey="magic"
            active={this.state.selectedTool === "magic"}
            onClick={this.handleToolClick}
          >
            <FontAwesome name='magic' />
          </ToolbarButton>
          {/* ColorPickerButton的active状态用于控制颜色选择器弹出，不参与主工具互斥 */}
          <ColorPickerButton />
        </ButtonGroup>
      </div>
    );
  }
}

第三步：ColorPickerButton的调整（无需改动核心逻辑） #

ColorPickerButton嵌套的ToolbarButton是用来控制颜色选择器弹出的，它的active状态属于自身的交互逻辑，和主工具的选中状态互不影响，所以保持你原来的代码即可，不用做额外修改。

为什么要这么做？ #

在React里，我们尽量避免直接操作DOM（像jQuery那样），而是通过状态驱动视图。把选中状态提到父组件后，所有子按钮的激活状态都由父组件的selectedTool状态决定，这样状态是单一数据源，逻辑更清晰，也更容易维护。比如以后要加新的工具按钮，只需要给它分配一个唯一的toolKey，然后在render里传递对应的active判断就行，非常方便。

内容的提问来源于stack exchange，提问作者Chase R Lewis