Группа переключателей в реакции

Question

Новый, чтобы реагировать и пытаться использовать в новом проекте изучения электронов, который у меня есть.Я пытаюсь создать действительно простое приложение для рисования.

Я создал класс ToolbarButton.Это будет представлять каждую кнопку и панель инструментов, которая будет управлять группой кнопок.Пример Если вы выберете «основной» инструмент, он должен отключить все остальные основные инструменты и оставить только ваш текущий выбор.

В jQuery я бы просто сделал что-то вроде

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

Какя бы сделал то же самое в реакции?Я могу переключать то, что я хочу, с помощью setState из ToggleButton, но разделение этого на подпорку кажется ответом, но тогда мне нужно, чтобы Панель инструментов управляла «активными» состояниями кнопки, и я не уверен, как это сделать.тот.Думайте, что ответ в 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>);
    }
}