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

Posted 2023-03-23

【中文标题】无法从输入类型 =“选择”中获取值

【英文标题】：Can't take value from Input Type ="select"

【发布时间】：2021-06-29 05:53:24

【问题描述】：

我正在尝试从下拉菜单中获取价值，但无法这样做。 我的 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 。那么在这种情况下应该怎么做呢？ 抱歉，如果这是一个基本问题，但我是新手，无法找到解决方案。谢谢

【参考方案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>

【讨论】：

如何设置组件的状态？如何在文档等情况下设置类型属性。显示错误

【参考方案2】：

你需要使用 value 而不是 selectedValue。

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

【参考方案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);

【讨论】：

仍然没有取值

你创建了状态 selectedValue 吗？

我已将您的 selectedValue 替换为 type..which 在我的状态下。

你在changeTypeHandler函数和输入值属性中都替换了吗？

我已将上面的代码更新为原始版本。现在让我试试 而不是

【参考方案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 也推荐这种方式。

【参考方案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>
    );
  

【讨论】：

不工作。这是我一开始在做的事情

@BATMAN 您需要详细说明，因为这在此沙箱中运行良好 codesandbox.io/s/divine-water-ww8t0

我不知道，但即使我选择了一个值，它也会发送一个空字符串

您和我的代码的唯一区别是您在我使用 ''(single ) 时使用 "" (double) 进行了初始化。这有什么不同吗？

否，但由于此代码在沙箱中运行，它也应该在您的本地运行。你试过沙盒吗？