提问者:小点点

语义UI React-使用远程内容填充下拉列表


我试图实现一个可搜索的下拉列表(使用语义UI React库),该下拉列表由来自服务器的匹配结果填充。用户将看到一个输入框。一旦他们开始键入几个字符,就会向后端restfulendpoint发出请求,该endpoint返回匹配的搜索结果。这些结果在下拉列表中显示为值。

这对于简单的语义用户界面来说非常容易(https://semantic-ui.com/modules/dropdown.html#match-search-query-on-server解释)。

但是,如何使用React版本的库来实现这一点呢?

我从文件上看不出来(https://react.semantic-ui.com/modules/dropdown/#usage-远程)。

有人能给我举个例子吗?


共1个答案

匿名用户

我能够将其编码如下:

class MyDd extends React.Component {
  state = {options: []}

  onSearchChange = (e, value) => {
    axios.get(`/api/match?query=${value.searchQuery}`)
     .then((response) => {
       this.setState({options: response.data})
    })

  }

  render() {
    return (
      <Dropdown
        onSearchChange={this.onSearchChange}
        search
        selection
        options={this.state.options}
      />
    )
  }
}