Question

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

请仅根据名称上下文提供解决方案。不在参考... 解决方案如下：

这是我的代码：

set.seed(2017);
df1 <- data.frame(x = rbinom(100, 5, .5))

Answer 1

修改对于<button />，您应该使用onClick而不是onChange。

您看到的错误是什么？我感觉您的错误出现在inputData处理程序中。

event.target.name似乎是Gynaec，Medicine或Surgery。 event.target.value似乎永远是qualification。

逻辑应该被翻转吗？像这样？

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

此外，console.log之后的setState无法打印出您期望的内容。 setState是异步的（see docs）。如果要在setState完成后运行代码，可以将回调函数作为setState的第二个参数传递。

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

Answer 2

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

执行以下更改：

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

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

如何设置状态变量的下拉值？

2 个答案: