Добавить стиль для кнопки в buttonGroup, когда пользователь выбирает один из вариантов

Question

Я пытаюсь добавить стиль в кнопку. Когда пользователь выбирает одну из кнопок из группы кнопок, кнопка должна быть выделена, и она должна оставаться выделенной, даже если пользователь выбирает другую кнопку из другой группы кнопок, но в моем случае, когда пользователь выбирает другую кнопку После выбора из другой группы кнопок предыдущая кнопка теряет свое состояние и больше не показывает активное подсвеченное состояние. Может кто-нибудь сказать мне, как этого добиться? В своем коде я добавил backgroundColor к свойству стиля, но, похоже, он не работает.

код ::

import React, { Component } from "react";
import { Button } from "semantic-ui-react";
import { withRouter } from "react-router";
import Answers from "../Answers/Answers";

class Section extends Component {
    state = {
        que1: "",
        que2: "",
        que3: ""
    };

    handleClick = event => {
        this.setState(
            {
                que1: event.target.attributes.getNamedItem("data-key").value
            },
            () => {
                console.log(this.state.que1);
            }
        );
    };

    handleClick2 = event => {
        this.setState(
            {
                que2: event.target.attributes.getNamedItem("data-key").value
            },
            () => {
                console.log(this.state.que2);
            }
        );
    };

    handleClick3 = event => {
        this.setState(
            {
                que3: event.target.attributes.getNamedItem("data-key").value
            },
            () => {
                console.log(this.state.que3);
            }
        );
    };

    render() {
        let styles = {
            width: '50%',
            margin: '0 auto',
            marginBottom: '15px'
        }
        console.log(this.state);
        const { history } = this.props;
        const { que1, que2, que3 } = this.state;
        return (
            <>
                <p>1. I was stressed with my nerves on edge.</p>
                <Button.Group widths="5" onClick={this.handleClick} style={styles}>
                    <Answers style={{ backgroundColor: 'gray' }} />
                </Button.Group>
                {` `}
                <p>2. I lost hope and wanted to give up when something went wrong.</p>
                <Button.Group widths="5" onClick={this.handleClick2} style={styles}>
                    <Answers style={{ backgroundColor: 'gray' }}/>
                </Button.Group>
                {` `}
                <p>3. I feel very satisfied with the way I look and act</p>
                <Button.Group widths="5" onClick={this.handleClick3} style={styles}>
                    <Answers style={{ backgroundColor: 'gray' }}/>
                </Button.Group>
                <p />
                {` `}
                <Button
                    disabled={!que1 || !que2 || !que3}
                    onClick={() => history.push("/section2")}
                >
                    NEXT
        </Button>
            </>
        );
    }
}

export default withRouter(Section);

Answers.js

import React, { Component } from "react";
import { Button } from "semantic-ui-react";

export class Answers extends Component {
  render() {
    return (
      <>
        <Button data-key="Never">Never</Button>
        <Button data-key="Occassionally">Occassionally</Button>
        <Button data-key="Often">Often</Button>
        <Button data-key="Very Often">Very Often</Button>
        <Button data-key="Always">Always</Button>
      </>
    );
  }
}

export default Answers;

вывод:

Answer 1

Я считаю, что проблема в том, что ваши компоненты Button.Group не знают о сохраненных значениях состояния (que1, que2, que3).Я полагаю, вам нужно передать их в ваши кнопки и отрендерить соответственно.В частности, вам нужно передать «активную» опору кнопкам (см. Здесь: https://codesandbox.io/s/wzq0941wol).

<Button.Group>
  <Button onClick={() => this.click(1)}
     active={this.state.active === 1} >
   One
  </Button>
  <Button onClick={() => this.click(2)}
     active={this.state.active === 2}
  >Two
  </Button>
</Button.Group>

, а затем ваш обработчик кликов просто сохраняет состояние:

click(val) {
    this.setState({ active: val });
  }

Винтегрируйте это с вашим классом Ответы выше, вы можете сделать что-то вроде этого:

export class Answers extends Component {
  render() {
    const selected = this.props.selected;
    return (
      <>
        <Button active={selected === "Never"} data-key="Never">Never</Button>
        <Button active={selected === "Occassionally"} data-key="Occassionally">Occassionally</Button>
        <Button active={selected === "Often"} data-key="Often">Often</Button>
        <Button active={selected === "Very Often"} data-key="Very Often">Very Often</Button>
        <Button active={selected === "Always"} data-key="Always">Always</Button>
      </>
    );
  }
}

и затем в вашем классе Раздела:

            <Button.Group widths="5" onClick={this.handleClick} style={styles}>
                <Answers selected={this.state.que1} style={{ backgroundColor: 'gray' }} />
            </Button.Group>