如何从 React 中的 Button Group 元素中获取按钮的值

Question

我正在尝试获取每个问题中按钮的值并希望存储数据。为此，我使用按钮组上的 handleClick 来获取按钮的值并通过设置 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;

输入 ::

输出 :: 未定义

Answer 1

我认为您正在尝试记录state，但您正在执行this.setState() 函数的console.log。由于 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)
})