Reactivesearch -从任何路径搜索

Question

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

我正试图找出如何通过我的反应应用程序导航，但仍然能够搜索。

假设我在主路由'/'上，使用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组件进行搜索)？

Answer 1

在这里，您将只使用自动完成的DataSearch，然后重定向到实际结果的结果页面。为此，您可以使用onValueSelected DataSearch 文档上的道具

通过用户交互选择的值调用onValueSelected。它只适用于autosuggest，每当选择建议或按enter键执行搜索时都会调用它。如果操作的原因是'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。