我试图实现一个可搜索的下拉列表(使用语义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-远程)。
有人能给我举个例子吗?
我能够将其编码如下:
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}
/>
)
}
}