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进行自动填充，然后重定向到结果页面以获取实际结果。为此，您可以在onValueSelected docs上使用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来设置状态（或存储）中的选定值，然后使用ReactiveList属性{{3} }。

Reactivesearch-从任何路线搜索

1 个答案:

主页

结果页