Reactivesearch - 从任何路线搜索

Question

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

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

Answer 1

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

使用通过用户交互选择的值调用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主页上设置所选值状态（或存储），然后查询ReactiveList结果页上有defaultQuery道具文档。