[英]Reactivesearch - search from any route
I'm experimenting with ReactiveSearch and using the ReactiveList component.我正在试验 ReactiveSearch 并使用 ReactiveList 组件。
I'm trying to figure out how I can navigate though my React app and still be able to search.我试图弄清楚如何在我的 React 应用程序中导航并仍然能够搜索。
Say I'm on the home route '/'
, use DataSearch component for autocomplete and that takes me to the results page '/results
but I don't get any results!!假设我在主路线
'/'
,使用 DataSearch 组件进行自动完成,这会将我带到结果页面'/results
但我没有得到任何结果!!
In order to get results, I have to search and stay on the '/results'
page.为了获得结果,我必须搜索并停留在
'/results'
页面上。 Is there a prop that I'm missing on my DataSearch component in the Header:标题中的 DataSearch 组件是否缺少我的道具:
<DataSearch
componentId="SearchSensor"
dataField={["original_title"]}
className="search-bar"
showIcon={true}
iconPosition="right"
innerClass={{
title: "text-title",
input: "text-input",
list: "text-item"
}}
/>
Again, in order to get results, I have to search from the DataSearch component that I have on the results page.同样,为了获得结果,我必须从结果页面上的 DataSearch 组件进行搜索。 Search doesn't work when I have search from the DataSearch component that is in the Header.
当我从标题中的 DataSearch 组件进行搜索时,搜索不起作用。
So how can I set it to be able to perform a search from any route that I might be on (searching from the DataSearch component that is in the Header for instance)?那么如何设置它以便能够从我可能在的任何路线上执行搜索(例如,从 Header 中的 DataSearch 组件进行搜索)?
Here you would be only using the DataSearch
for autocomplete and then redirecting to the results page for the actual results.在这里,您将仅使用
DataSearch
进行自动完成,然后重定向到实际结果的结果页面。 For this you could use the onValueSelected
prop on DataSearch
docs :为此,您可以使用
DataSearch
文档上的onValueSelected
道具:
onValueSelected
is called with the value selected via user interaction.使用通过用户交互选择的值调用
onValueSelected
。 It works only withautosuggest
and is called whenever a suggestion is selected or a search is performed by pressing enter key.它仅适用于
autosuggest
并在选择建议或按 Enter 键执行搜索时调用。 It also passes the cause of action and the source object if the cause of action was'SUGGESTION_SELECT'
.如果操作原因是
'SUGGESTION_SELECT'
它还会传递操作原因和源对象。
So you can get the selected value on the homepage, and then use it for doing a search on the results page.因此,您可以在主页上获取所选值,然后使用它在结果页面上进行搜索。 This value can be stored in your component's state for doing search or you can add a
DataSearch
in your results page too and use the URLParams
prop to set its value from the url.此值可以存储在组件的状态中以进行搜索,或者您也可以在结果页面中添加
DataSearch
并使用URLParams
从 url 设置其值。 For example:例如:
<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']
}}
/>
Alternatively, you could use the onValueSelected
on homepage to set the selected value in state (or store) and then query the ReactiveList
on results page with defaultQuery
prop docs .另外,您也可以使用
onValueSelected
主页上设置所选值状态(或存储),然后查询ReactiveList
结果页上有defaultQuery
道具文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.