从 ReactJS 的下拉菜单中获取价值的简单方法

Question

我试图确保存储用户从 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>

Answer 1

您正在访问state.value，即undefined，因为您所在的州没有名为value 的属性。为了解决这个问题，您需要为您的状态中的 select 元素添加一个属性。

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}>