在反应中从下拉菜单中提取值时遇到问题答案

【问题标题】：trouble pulling a value from a dropdown menu in react在反应中从下拉菜单中提取值时遇到问题
【发布时间】：2017-06-14 21:14:32
【问题描述】：

这可能是一个愚蠢的问题，但我是新手，我的下拉菜单有些困难。长话短说，我有一个位置列表，我需要能够“拉出”用户从菜单中选择的任何位置（我计划使用该位置信息使用 Google 的静态地图 API 生成地图） .

<form onSubmit={this.handleSubmit}>
    <select className="menu" name="select" value={this.state.value} onChange={this.searchLocations}>
      {options}
    </select>
    <input type="submit" value="Submit" />
  </form>

（这是生成 {options} 的代码）：

    let options = this.state.locationsBase.map((item, index) => {
    return(
      <option key={index + 1} value={this.state.locationsBase}>{item.name}</option>
    )
  })

locationsBase 是一个使用 componentDidMount 加载的数组。

所以我的问题是： <select value= > 正在返回“未定义”，当我需要它返回用户单击的任何位置时（并且位置的值包含在 {options} 中）。（此外，这些位置都显示在下拉菜单中）。

我不知道这是否很清楚，但任何帮助将不胜感激。谢谢。

更新

这就是 searchLocations 函数的样子：

      searchLocations(e){
       e.preventDefault()
       let selectedLocation = this.locationQuery
       console.log(selectedLocation)
       this.setState({
       locationResults: this.state.selectedLocation
     })

selectedLocation 在控制台中返回undefined。

在我的初始状态下，locationQuery 设置为 this.value。

更新（完整组件）：

class LocationsContainer extends Component {
  constructor(props){
  super(props)
  this.state = {
  locationQuery: this.value,
  locationResults: "",
  locationsBase: []
 }


this.handleOnChange = this.handleOnChange.bind(this)
this.searchLocations = this.searchLocations.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}

componentDidMount(){
this.setState({
  locationsBase:[
    {name: "Pick a branch" , address: ""},
    {name: "Anacostia" , address: "1800 Good Hope Rd SE"},
    {name: "Bellevue" , address: "115 Atlantic St SW"},
    {name: "Benning" , address: "3935 Benning Rd NE"},
    {name: "Capitol View" , address: "5001 Central Ave SE"},
    ]
    }, () => {
    console.log(this.state.locationsBase)
  })
}
  handleOnChange(e) {
  const name = e.target.value
  this.setState({
  [name]: e.target.value
 })
  console.log("name")
}

searchLocations(e){
  e.preventDefault()
  let selectedLocation = this.locationQuery
  console.log(selectedLocation)
  this.setState({
    locationResults: this.state.selectedLocation
  })


  console.log(this.locationResults, 'something is working')
  }

handleSubmit(e) {
alert('Your location is: ' + this.state.value);
event.preventDefault();
}



 render (){
  let options = this.state.locationsBase.map((item, index) => {
    return(
      <option key={index + 1} value={this.state.locationsBase}>
      {item.name}</option>
    )
   })

return (
  <div>
    <h3>Choose your branch!</h3>
    <form onSubmit={this.handleSubmit}>
    <select className="menu" name="select" value={this.state.value} 
      onChange={this.searchLocations}>
      {options}
    </select>
    <input type="submit" value="Submit" />
  </form>



    <p>{this.state.locationResults}</p>

  </div>

  )
}


 }


export default LocationsContainer

【问题讨论】：

你的this.searchLocations 函数是什么样的？它应该更新this.state.value。这样你就可以在需要选择的值时获取this.state.value
你能展示你如何处理你的状态吗？此外，您的 option 值不应该是同一个数组...
@StephenL 我已经更新了帖子以包含 searchLocations 功能。
@BravoZulu 你是说我的默认状态吗？
不应该是let selectedLocation = this.state.locationQuery吗？看起来你的代码有几个问题，也许发布完整的组件？

标签： javascript reactjs drop-down-menu this setstate

【解决方案1】：

看来您需要将 onChange 事件传递给 searchLocations 函数。

    <select onChange={( e ) => this.searchLocations( e ) }>
      {options}
    </select>

然后获取e.target.value 的值并将其传递给您的this.locationQuery 函数。

希望这会有所帮助！

【讨论】：