Reactjs 如何在状态变量中设置下拉列表的值？

仅将整个下拉列表中的一个值设置为状态变量。 在这段代码中有一些问题，因为正确的值没有存储在状态变量限定中

请仅根据名称上下文给出解决方案。不在参考中。。。 解决办法如下：

这是我的密码：

import React, { Component } from 'react';
class App extends Component {
  constructor(props){
    super(props);

    this.state = {qualification:''};
    this.submitData = this.submitData.bind(this);
    this.inputData = this.inputData.bind(this);
  }
  submitData(event)
  {

  }
  inputData(event)
  {
    this.setState({[event.target.name]: event.target.value});
  }
  render() {
    return (
      <div>
        <form>
        <div class="btn-group">
      <button type="button" class="btn btn-primary btn-ch dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Qualification
      </button>
      <div class="dropdown-menu dropdown-ch dropdown-menu-right">
        <button class="dropdown-item" type="button" value="Gynaec" onChange={this.inputData} name="qualification">Gynaec</button>
        <button class="dropdown-item" type="button" value="Medicine" onChange={this.inputData} name="qualification">Medicine</button>
        <button class="dropdown-item" type="button" value="Surgery" onChange={this.inputData} name="qualification">Surgery</button>
      </div>
    </div>
    <button>Submit</button>
  </form>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={限定：'}；
this.submitData=this.submitData.bind（this）；
this.inputData=this.inputData.bind（this）；
}
提交数据（事件）
{
}
输入数据（事件）
{
this.setState（{[event.target.name]：event.target.value}）；
}
render（）{
返回(
资格
妇科的
药
外科
提交
);
}
}
导出默认应用程序；

编辑对于

，您应该使用

onClick

而不是

onChange

您看到的错误是什么？ 我感觉您的错误在

inputData

处理程序中

event.target.name

可能是

妇科

，

内科

，或

外科

。

事件.目标.值

似乎总是

限定

逻辑应该颠倒吗？像这样

  inputData(event)
  {
    this.setState({[event.target.value]: event.target.name});
  }

另外，在

setState

之后使用的

console.log

不会打印您期望的内容<代码>设置状态是异步的（）。如果要在

setState

完成后运行代码，可以将回调函数作为

setState

的第二个参数传递

this.setState({ foo: "SOME NEW STATE" }, () => {
    console.log("This runs after setState has completed!");  
});

---

所需的更改是我们必须更改我们在每个按钮中传递的事件

是否进行了如下更改：

import React, { Component } from 'react';
class App extends Component {
  constructor(props){
    super(props);

    this.state = {qualification:''};
    this.submitData = this.submitData.bind(this);
    this.inputData = this.inputData.bind(this);
  }
  submitData(event)
  {
    event.preventDefault();
    console.log(this.state.qualification)
  }
  inputData(event)
  {
    this.setState({
      [event.target.name]: event.target.value
    });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.submitData}>
        <div class="btn-group">
      <button type="button" class="btn btn-primary btn-ch dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Qualification
      </button>
      <div class="dropdown-menu dropdown-ch dropdown-menu-right">
        <button class="dropdown-item" type="button" value="Gynaec" onClick={this.inputData} name="qualification">Gynaec</button>
        <button class="dropdown-item" type="button" value="Medicine" onClick={this.inputData} name="qualification">Medicine</button>
        <button class="dropdown-item" type="button" value="Surgery" onClick={this.inputData} name="qualification">Surgery</button>
      </div>
    </div>
    <button>Submit</button>
  </form>
      </div>
    );
  }
}

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={限定：'}；
this.submitData=this.submitData.bind（this）；
this.inputData=this.inputData.bind（this）；
}
提交数据（事件）
{
event.preventDefault（）；
console.log（this.state.qualification）
}
输入数据（事件）
{
这是我的国家({
[event.target.name]：event.target.value
});
}
render（）{
返回(
资格
妇科的
药
外科
提交
);
}
}

---

在每个按钮中将代码更改为onClick事件。并通过控制台查看是否显示正确的输出

问题：为什么有3个按钮带有class

下拉项

？这是引导。。。！它是这样定义的。没有逻辑是正确的，因为我有其他一些文件，其中这个逻辑对于简单的输入字段是正确的。。。但对于下拉列表，我不明白……哦，可能是打字错误。我注意到您的

上有

onChange

。能否将其更改为

onClick

？this.setState（{[event.target.name]：event.target.value}）。然后是（console.log（this.state.qualification））；上述注释方式是否正确用于.then（）方法？