Question

我正在使用this材质ui下拉菜单...当我单击下拉菜单并使用箭头键上下移动并按Enter时，则不会在下拉菜单中选择该值。

这是下拉菜单的代码

  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>

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

Answer 1

您需要等待javascript中的async操作。您的api解决了成功的承诺。您需要这样做：

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

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

输入时的材料ui下拉列表单击未选择值

1 个答案: