reactjs - 如何从 React 中的 Button Group 元素中获取按钮的值
问题描述
我正在尝试获取每个问题中按钮的值并希望存储数据。为此,我使用按钮组上的 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;
输出::未定义
解决方案
我认为您正在尝试记录state
,但您正在执行 console.logthis.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);
})
推荐阅读
- mysql - 为什么mysql不像percona服务器那样实现杀死空闲事务?
- javascript - model.predict is not a function while using TensorflowJS
- javascript - Math.min.apply(Math,Array) return NaN when Array.length = 100
- mysql - MySQL 中的不偏不倚查询
- php - Wordpress - ACF - 带有 x 2 字段过滤器的管理员/用户列表
- python - 用于为返回动态数据的函数编写单元测试的 Python 库
- ios - macOS Swift AVCaptureSession sessionPreset 不起作用
- c# - 在 C# Winforms 中将视频转换为 exe
- android - 如何在android studio中编译一个aosp项目?
- ios - ios应用程序的内存消耗