Semantic UI React - заполнить раскрывающийся список удаленным контентом
Я пытаюсь реализовать раскрывающийся список с возможностью поиска (с использованием библиотеки Semantic UI React), который заполняется путем сопоставления результатов с сервера. Пользователю предоставляется поле ввода. Как только они начинают набирать несколько символов, к серверной конечной точке, работающей в режиме ожидания, отправляется запрос, который возвращает совпадающие результаты поиска. Эти результаты отображаются в виде значений в раскрывающемся списке.
Это было довольно просто с простым семантическим пользовательским интерфейсом (объяснено на https://semantic-ui.com/modules/dropdown.html#match-search-query-on-server).
Но как я могу добиться этого с помощью версии библиотеки React?
Не могу понять из документации (https://react.semantic-ui.com/modules/dropdown/#usage-remote).
Может ли кто-нибудь привести мне пример?
Ответы 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}
/>
)
}
}
Мне также нужно было установить
searchв раскрывающемся списке для идентификации (options => options), поскольку в противном случае он пытался отфильтровать мои параметры на основе их свойстваtext.