Reactivesearch

Question

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

我正在尝试弄清楚如何在我的 React 应用程序中导航并仍然能够搜索。

假设我在回家的路上 '/'，使用 DataSearch 组件进行自动完成，这会将我带到结果页面 '/results 但我没有得到任何结果！！

为了获得结果，我必须搜索并留在 '/results' 页面上。 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"
  }}
  />

同样，为了获得结果，我必须从结果页面上的 DataSearch 组件进行搜索。当我从页眉中的 DataSearch 组件进行搜索时，搜索不起作用。

那么我如何设置它以便能够从我可能在的任何路线上执行搜索（例如从 Header 中的 DataSearch 组件搜索）？

Answer 1

在这里您将只使用 DataSearch 进行自动完成，然后重定向到结果页面以获得实际结果。为此，您可以在 DataSearch docs:

上使用 onValueSelected 道具

onValueSelected is called with the value selected via user interaction. It works only with autosuggest and 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 设置状态（或存储）中的选定值，然后使用 defaultQuery 属性 [=] 在结果页面上查询 ReactiveList 25=].

Reactivesearch - 从任何路线搜索

Reactivesearch - search from any route

routing

reactjs

主页

结果页面