Reactivesearch-从任何路线搜索

问题描述

我正在尝试ReactiveSearch并使用ReactiveList组件。

I'm experimenting with ReactiveSearch and using the ReactiveList component.

我试图弄清楚如何浏览我的React应用并且仍然能够搜索。

I'm trying to figure out how I can navigate though my React app and still be able to search.

说我在本地路线'/'上，使用DataSearch组件进行自动填充，这需要我进入结果页面'/结果，但我没有任何结果！

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组件上是否缺少我一个道具：

In order to get results, I have to search and stay on the '/results' page. Is there a prop that I'm missing on my DataSearch component in the Header:

<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组件进行搜索时，搜索不起作用。

Again, in order to get results, I have to search from the DataSearch component that I have on the results page. Search doesn't work when I have search from the DataSearch component that is in the Header.

因此，如何设置它以便能够从任何路径执行搜索我可能会打开（例如从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)?

推荐答案

使用 DataSearch 进行自动填充，然后重定向到结果页面以获取实际结果。为此，您可以在 DataSearch onValueSelected 道具/reactive-manual/search-components/datasearch.html#extending rel = nofollow noreferrer>文档：

Here you would be only using the DataSearch for autocomplete and then redirecting to the results page for the actual results. For this you could use the onValueSelected prop on DataSearch docs:

因此，您可以在主页上获取选定的值，然后将其用于在结果页上进行搜索。此值可以存储在组件的状态中以进行搜索，也可以在结果页中添加 DataSearch 并使用 URLParams 属性，以通过url设置其值。例如：

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. For example:

<DataSearch
  ...
  componentId="q"
  onValueSelected={(val) => Router.push(`?q=${val}`)}  // using nextjs router here for example
/>

结果页

Results Page

<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 上使用主页以将所选值设置为状态（或存储），然后使用 defaultQuery prop ReactiveList a href = https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html#props rel = nofollow noreferrer>文档。

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.

这篇关于Reactivesearch-从任何路线搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！