reactjs - Semantic UI React - 用远程内容填充下拉列表

Question

我正在尝试实现一个可搜索的下拉列表(使用 Semantic UI React 库)，该下拉列表由来自服务器的匹配结果填充。向用户呈现一个输入框。一旦他们开始输入几个字符，就会向后端 Restful 端点发出请求，该端点返回匹配的搜索结果。这些结果在下拉列表中显示为值。

使用简单的语义 UI，这非常容易(在 https://semantic-ui.com/modules/dropdown.html#match-search-query-on-server 中进行了解释)。

但是如何使用 React 版本的库来实现这一目标？

我无法从文档中弄清楚( https://react.semantic-ui.com/modules/dropdown/#usage-remote )。

有人能给我举个例子吗？

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