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