在React中切换按钮组

Question

我在新的电子学习项目中做出反应并尝试使用的新手。我正在尝试构建一个非常基本的绘图应用程序。

我创建了一个ToolbarButton类。这将代表每个按钮和一个管理按钮组的工具栏。示例如果您选择“主要”工具，则应关闭所有其他主要工具，并仅保留当前选择。

在jQuery中我会做类似

的事情

   let button = $(this);
   let toolbar = $(this).parent();
   toolbar.find('button.toolbar-button').removeClass('active');
   button.addClass('active');

我如何反应？我可以在ToggleButton中用setState切换我想要的东西，但是把它分成一个道具似乎是一个答案，但是我需要让工具栏管理按钮“活动”状态，我不知道该怎么做那。认为答案是在ReactDOM，超级新手作出反应，如果答案过于明显，请道歉。

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { ButtonGroup } from 'react-bootstrap';
import { ChromePicker} from 'react-color';

class ToolbarButton extends React.Component
{
    state = 
    {
        active: false
    }

    handleClick = ()=> {

        if(this.props.onClick)
        {
            this.props.onClick();
        }         

        this.setState({ active: !this.state.active});
    }

    render(){
        return <div className={`btn btn-primary${this.state.active ? ' active' : ''}`} onClick={this.handleClick}>{this.props.children}</div>
    }
}

class ColorPickerButton extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            displayColorPicker: false,
            color: { r: 255, g: 255, b: 255, a:1 } 
        }
    }

    state = {
        flyout: 'bottom',
        displayColorPicker: false,
        color: { r: 255, g: 255, b: 255, a:1 } 
    }

    /* This button should have an option to display how the colorpicker flys out */
    static flyoutStyles =
    {
        normal: { },
        top: {top: '0px' },
        bottom: { top: '100%' },
        left: { right: '100%' },
        right: { left: '100%' }
    }

    handleClick = (e) => {
        this.setState({ displayColorPicker: !this.state.displayColorPicker});
    }

    handleClose = () => {
        this.setState({ displayColorPicker: false });
    }

    handleChange = (color) => {
        this.setState({ color: color.rgb });
    }

    stopPropagation = (e) => {
        e.stopPropagation();
    }

    render()
    {
        const swatchStyle = {
            backgroundColor: `rgba(${this.state.color.r},
                ${this.state.color.g},
                ${this.state.color.b},
                ${this.state.color.a})`,
            height: '16px',
            width: '16px',
            border: '1px solid white'
        };

        const popup = {
            position: 'absolute',
            zIndex: 2,
            top: 'calc(100% + 2px)'
        };

        const cover = {
            position: 'fixed',
            top: '0px',
            right: '0px',
            left: '0px',
            bottom: '0px',
        };

        return (
            <ToolbarButton onClick={this.handleClick} active={this.state.displayColorPicker}>
                <div style={swatchStyle} />
                {
                    this.state.displayColorPicker ?
                        <div style={popup} onClick={this.stopPropagation}>
                             <div style={ cover } onClick={ this.handleClose }/>
                             <ChromePicker color={this.state.color} onChange={this.handleChange} />
                        </div>
                    : null
                }
            </ToolbarButton>
        );
    }
}

export class CanvasToolbar extends React.Component
{
    handleClick = (e) => {

    }

    render(){
        return (<div className="CanvasToolbar">
            <ButtonGroup vertical>
                <ToolbarButton>
                    <FontAwesome name='paint-brush' />
                </ToolbarButton>
                <ToolbarButton>
                <FontAwesome name='eraser' />
                </ToolbarButton>
                <ToolbarButton>
                    <FontAwesome name='magic' />
                </ToolbarButton>
                <ColorPickerButton />
            </ButtonGroup>
        </div>);
    }
}