下拉菜单未显示所选选项答案

【问题标题】：Dropdown isn't showing selected option下拉菜单未显示所选选项
【发布时间】：2021-03-07 01:52:31
【问题描述】：

我正在尝试创建一个下拉列表，让我的管理员用户能够选择他们想要添加问题的课程，我有它，因此它会更改 courseUrl 的状态，但是，当用户选择一个选项时，它不会更改下拉菜单本身的选定选项，这不会给我的用户任何反馈。

下拉菜单

<select
  name="courseUrl"
  id="courseUrl"
  onChange={this.handleChange}
  value={this.state.course}
>
  {
    courses.length && courses.map(course => {
      return <option value={course.courseUrl} key={course.courseName}></option>
    })
  }
</select>

handleChange

handleChange = (e) => {
  this.setState({ [e.target.id]: e.target.value })
}

【问题讨论】：

您的key 似乎设置不正确。
@usafder 我也这么认为，之前一切都是 courseName 而不是 courseUrl 时它可以工作，我已将其更改为 course.courseUrl，但它仍然无法工作？
handleChange = (e) => { this.setState({ course: e.target.value }) }
我创建了一个示例演示。检查这个 - codesandbox.io/s/modest-antonelli-z3t9n?file=/src/App.js

标签： javascript html reactjs

【解决方案1】：

您的问题在于 on change 功能，您应该将其设置为仅值，而不是归档的 id，因为下拉值是 value={this.state.course}：

handleChange = (e) => { this.setState({ course: e.target.value }) }

【讨论】：