当用户选择其中一个选项时，将样式添加到 buttonGroup 中的按钮

Question

我正在尝试在按钮中添加样式当用户从 buttonGroup 中选择一个按钮时，按钮应该突出显示，即使用户从不同的按钮组中选择另一个按钮，它也应该保持突出显示，但在我的情况下，当用户选择另一个按钮时来自不同按钮组的选项然后前一个按钮失去它的状态，它不再显示活动的突出显示状态。谁能告诉我如何做到这一点？在我的代码中，我将 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）。我相信您需要将这些传递到您的 Buttons 并相应地呈现。具体来说，您需要将“活动”道具传递给按钮（请参阅此处：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 });
  }

要将其与上面的 Answers 类集成，您可以执行以下操作：

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>
      </>
    );
  }
}

然后在您的 Section 类中：

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