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