html - 从 ReactJS 的下拉菜单中获取价值的简单方法
问题描述
我试图确保存储用户从 ReactJS 的下拉菜单中选择的正确值。我在这里修改现有代码并显示我认为有助于理解问题的部分。谁能告诉我正确设置参数值的简单方法?直到现在我无法存储价值
非常感谢
emphasized textimport React from "react";
import { Centered } from "meteor/empirica:core";
export default class ExitSurvey extends React.Component {
static stepName = "ExitSurvey";
state = { age: "", gender: "", country: "", strength: "", fair: "", feedback: "" , education: "", occupation: "xxxx"};
handleChange = event => {
const el = event.currentTarget;
this.setState({ [el.name]: el.value });
};
handleSubmit = event => {
event.preventDefault();
this.props.onSubmit(this.state);
};
selectCountry (val) {
this.setState({ country: val });
}
render() {
const { player } = this.props;
const { age, gender, country, strength, fair, feedback, education, occupation} = this.state;
return (
<Centered>
<div className="exit-survey">
<h1> Exit Survey </h1>
<p>
Please submit the following code to receive your bonus:{" "}
<strong>{player._id}</strong>.
</p>
<p>
You final <strong>bonus</strong> is in addition of the{" "}
<strong>1 base reward</strong> for completing the HIT.
</p>
<br />
<p>
Please answer the following short survey. You do not have to provide
any information you feel uncomfortable with.
</p>
<form onSubmit={this.handleSubmit}>
<div>
<label><b>Occupation:</b></label>
<div>
<select value={this.state.value} onChange={this.handleChange}>
<option value="Personal-care">Personal care and service occupations</option>
<option value="Sales">Sales and related occupations</option>
<option value="Office-Admin">Office and administrative support occupations</option>
<option value="Farming-Fishing">Farming, fishing, and forestry occupations</option>
<option value="Construction">Construction and extraction occupations</option>
<option value="Installation-Maintenance">Installation, maintenance, and repair occupations</option>
<option value="Production">Production occupations</option>
<option value="Transportation">Transportation and material moving occupations</option>
<option value="Military">Military specific occupations</option>
</select>
</div>
</div>
<p> hello :::: {this.state.occupation}</p>
解决方案
您正在访问state.value
这是undefined
因为您没有value
在您的州命名的财产。为了解决这个问题,您需要为您所在州的选择元素添加一个属性。
state = {
selectedValue: ''
// this could also be a value for one of its options
// e.g selectedValue: 'Personal-care'
// add rest of your state values...
};
您的handleChange
函数基本上是存储元素的名称并为其分配值。但是您还没有在状态中初始化该属性。因此,当组件第一次呈现时,您将没有为 select 元素设置任何值。
要解决此问题,请修改您的handleChange
函数以反映以下内容...
handleChange = event => {
const { value } = event.currentTarget;
this.setState({ selectedValue: value });
};
然后,在您的渲染函数中,更新 select 元素以访问存储在状态中的属性。
<select value={this.state.selectedValue} onChange={this.handleChange}>
推荐阅读
- java - 从android中的方法访问JSON数据
- php - 数据库设计:将文件分配给多个用户
- java - 在屏幕锁定的情况下处理音量按钮
- css - 当我在属性内容中使用 CSS3 函数 target-counter 时,iText7 不起作用
- bokeh - 用于补丁的 Bokeh Hovertool
- ios - 通过 AirDrop 共享的文件不完整
- c++ - 如何在派生自 PIMPL 基类的类中重用相同的 impl 析构函数?
- javascript - Next.js 页面中的 ag-grid 渲染
- c++ - 使用变量的类型作为模板参数
- javascript - 进入全屏模式后,从嵌入式 iframe 中删除 Youtube 品牌、标题文本等