无法从输入类型 =“选择”中获取值

Question

我正在尝试从下拉菜单中获取价值，但无法这样做。 我的 dropdrop 代码是：

  <Input type="select" name="type" id="etype" value={this.state.type} onChange={this.changeTypeHandler}>
                            <option value="Doctor">Doctor</option>
                            <option value ="Nurse"> Nurse</option>
                        </Input>

而我的 changeTypeHandler 是

 changeTypeHandler = (event) => {
        this.setState({ type: event.target.value });
    }

我在 type 的解决方案中看到了 this.state.selectedValue 。那么在这种情况下应该怎么做呢？ 抱歉，如果这是一个基本问题，但我是新手，无法找到解决方案。谢谢

Answer 1

你好，你可以用这个代替那个

function get_selected_input() {
  alert(document.querySelector('#etype').value)
}

    <select type="select" name="type" id="etype" onChange=get_selected_input(this)>
                            <option value="">Select Option</option>
                           <option value="Doctor">Doctor</option>
                            <option value ="Nurse"> Nurse</option>
                        </select>

Answer 2

你需要使用 value 而不是 selectedValue。

changeTypeHandler = (event) => {this.setState({type: event.target.value})}

Answer 3

试试这样：

<select name="type" id="etype" value={this.state.selectedValue} 
      onChange={this.changeTypeHandler}>
      <option value="Doctor">Doctor</option>
      <option value ="Nurse"> Nurse</option>
</select >

对于 onChange 函数

changeTypeHandler =(event) =>
{
    this.setState({selectedValue:event.target.value});
}

Answer 4

最好用 Reactjs 的方式来做，这意味着你可以使用 select tag

<select value={this.state.value} onChange={this.handleChange}>
            <option value="Doctor">Doctor</option>
            <option value="Nurse">Nurse</option>
</select>

和处理程序

handleChange(event) {
    this.setState({value: event.target.value});
  }

React official web site 也推荐这种方式。

Answer 5

试试这个

import React from "react";
import { Input } from "reactstrap";

export default class App extends React.Component {
  state = {
    type: ""
  };

  changeTypeHandler = (e) => {
    this.setState({ type: e.target.value });
  };

  render() {
    console.log(this.state)
    return (
      <div className="App">
        <Input
          type="select"
          name="type"
          id="etype"
          value={this.state.type}
          onChange={this.changeTypeHandler }
        >
          <option value="Doctor">Doctor</option>
          <option value="Nurse"> Nurse</option>
        </Input>
      </div>
    );
  }
}