Как получить значение кнопки из элемента Button Group в React

Question

Я пытаюсь получить значение кнопки в каждом вопросе и хочу сохранить данные. Для этого я использую handleClick для Button Group, чтобы получить значение кнопки и изменяю состояние в объекте состояния, устанавливая setState (), но я не получаю неопределенный вывод. Может кто-нибудь сказать, если я использую правильный метод, чтобы получить значение кнопки из ButtonGroup.

код ::

import React, { Component } from "react";
import CommonButton from "../Button/CommonButton";
import { Link } from "react-router-dom";
import { Button } from "semantic-ui-react";

class Section extends Component {
  // questions = [
  //   { question1: "I was stressed with my nerves on edge" },
  //   { question: "I lost hope and wanted to give up when something went wrong" },
  //   { question: "I feel very satisfied with the way I look and act" }
  // ];

  state = {
    que1: "",
    que2: "",
    que3: ""
  };

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

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

  handleClick3 = event => {
    console.log(
      this.setState({
        que2: event.target.attributes.getNamedItem("data-key3").value
      })
    );
  };

  render() {
    return (
      <>
        <p>1. I was stressed with my nerves on edge.</p>
        <Button.Group widths="5" onClick={this.handleClick}>
          <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>
        </Button.Group>
        <span />
        <p>2. I lost hope and wanted to give up when something went wrong.</p>
        <Button.Group widths="5" onClick={this.handleClick2}>
          <Button data-key2="Never">Never</Button>
          <Button data-key2="Occassionally">Occassionally</Button>
          <Button data-key2="Often">Often</Button>
          <Button data-key2="Very Often">Very Often</Button>
          <Button data-key2="Always">Always</Button>
        </Button.Group>
        <p>3. I feel very satisfied with the way I look and act</p>
        <Button.Group widths="5" onClick={this.handleClick3}>
          <Button data-key3="Never">Never</Button>
          <Button data-key3="Occassionally">Occassionally</Button>
          <Button data-key3="Often">Often</Button>
          <Button data-key3="Very Often">Very Often</Button>
          <Button data-key3="Always">Always</Button>
        </Button.Group>
        <p />
        <Link to="/section2">
          <CommonButton text={"NEXT"} />{" "}
        </Link>
      </>
    );
  }
}

export default Section;

Ввод ::

вывод :: undefined

Answer 1

Я думаю, что вы пытаетесь войти state, но вместо этого вы делаете console.log с функцией this.setState(). Поскольку setState ничего не возвращает, вывод не определен. В функции обработчика просто измените

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

до

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

или лучше - использовать обратный вызов setState -

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

Answer 2

вы печатаете this.setState

измените это

console.log(
      this.setState({
        que2: event.target.attributes.getNamedItem("data-key3").value
      })
    );

на

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