Question

我试图获取每个问题中button的值，并希望存储数据。为此，我使用ButtonGroup上的handleClick来获取button的值，并通过设置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

您正在打印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)
})

Answer 2

我认为您正在尝试登录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);
})

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

2 个答案: