Question

这可能是一个愚蠢的问题，但我是新的反应，我的下拉菜单有些困难。长话短说，我有一个位置列表，我需要能够“拉出”用户从菜单中选择的任何位置（我计划使用该位置信息使用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= >返回'undefined'，当我需要它返回用户点击的任何位置时（位置的值包含在{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

Answer 1

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

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

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

希望这有帮助！

麻烦从下拉菜单中提取值

1 个答案: