Reactivesearch - поиск с любого маршрута
Я экспериментирую с ReactiveSearch и использую компонент ReactiveList.
Я пытаюсь понять, как я могу перемещаться по своему приложению React и по-прежнему иметь возможность искать.
Скажем, я нахожусь на домашнем маршруте '/', использую компонент DataSearch для автозаполнения, и это переводит меня на страницу результатов '/results, но я не получаю никаких результатов !!
Чтобы получить результаты, мне нужно выполнить поиск и оставаться на странице '/results'. Есть ли опора, которую мне не хватает в моем компоненте DataSearch в заголовке:
<DataSearch
componentId = "SearchSensor"
dataField = {["original_title"]}
className = "search-bar"
showIcon = {true}
iconPosition = "right"
innerClass = {{
title: "text-title",
input: "text-input",
list: "text-item"
}}
/>
Опять же, чтобы получить результаты, мне нужно выполнить поиск из компонента DataSearch, который у меня есть на странице результатов. Поиск не работает, когда у меня есть поиск из компонента DataSearch, который находится в заголовке.
Итак, как я могу настроить его так, чтобы он мог выполнять поиск с любого маршрута, на котором я мог бы быть (например, поиск из компонента DataSearch, который находится в заголовке)?
Ответы 1
Здесь вы будете использовать DataSearch только для автозаполнения, а затем перенаправить на страницу результатов для фактических результатов. Для этого вы можете использовать опору onValueSelected на DataSearchдокументы:
onValueSelectedis called with the value selected via user interaction. It works only withautosuggestand is called whenever a suggestion is selected or a search is performed by pressing enter key. It also passes the cause of action and the source object if the cause of action was'SUGGESTION_SELECT'.
Таким образом, вы можете получить выбранное значение на домашней странице, а затем использовать его для выполнения поиска на странице результатов. Это значение можно сохранить в состоянии вашего компонента для выполнения поиска, или вы также можете добавить DataSearch на страницу результатов и использовать опору URLParams для установки его значения из URL-адреса. Например:
Домашняя страница
<DataSearch
...
componentId = "q"
onValueSelected = {(val) => Router.push(`?q=${val}`)} // using nextjs router here for example
/>
Страница результатов
<DataSearch
...
componentId = "q" // will set its value from the param 'q'
URLParams
className = "hidden" // adding some CSS to hide it if not needed
/>
<ReactiveList
...
react = {{
and: ['q']
}}
/>
В качестве альтернативы вы можете использовать onValueSelected на домашней странице, чтобы установить выбранное значение в состоянии (или хранилище), а затем запросить ReactiveList на странице результатов с помощью defaultQuery prop документы.
Ага, именно так :)
Похоже, что пока у меня установлен componentId = "q" и я использую onValueSelected для маршрутизации результатов в моем компоненте DataSearch, я могу использовать один и тот же компонент DataSearch как на домашней странице, так и в моем компоненте React Navbar, и он должен давать результаты, если с домашней страницы или любого другого маршрутизатора в приложении? Это правильно?