javascript - material ui dropdown on enter click not selecting value

Question

I am using this material ui dropdown... When I click on the dropdown and moving up and down with the arrow keys and press enter then the value doesn't get selected in the dropdown menu.

Here is the code for the dropdown

  handleChange(value) {
    this.props.fetchSubcategories(value)
  }

<Field
  name="boroughs"
  component={SelectField}
  type="text"
  hintText="Boroughs"
>
  {dasboardBoroughts.map((boroughts, i) => {
    return(<MenuItem onClick={() => this.handleChange(boroughts.name)} key={i} value={capitalize_Words(boroughts.name)} primaryText={capitalize_Words(boroughts.name)} />)
  })}
</Field>

Code for fetchSubcategories

export const fetchSubcategories = (data) => {
  const query = `{getSubcategories(category: "${data}") { foursquareData { categories { name }}}}`
  return fetch(HOSTNAME, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  })
  .then((payload) => {
    return payload
  })
}

标签： javascriptreactjsdrop-down-menumaterial-ui

Answer 1

您需要等待asyncjavascript中的操作。您的 api 在成功时解决了一个承诺。你需要这样做：

handleChange= value => {
 this.props.fetchSubcategories(value).then((res)=>{
  this.setState({
    menuvalue: //response value
  })
})
}

稍后您可以在您的选择值中起诉此状态值。