Reactivesearch - 从任何路线搜索

IT技术 reactjs routing reactivesearch
2021-05-16 06:21:06

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

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

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

为了获得结果，我必须搜索并停留在'/results'页面上。标题中的 DataSearch 组件是否缺少我的props：

<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 组件进行搜索）？

1个回答

在这里，您将只使用DataSearchfor 自动完成，然后重定向到实际结果的结果页面。为此，您可以使用docsonValueSelected上的props：DataSearch

onValueSelected使用通过用户交互选择的值调用。它仅适用于autosuggest并在选择建议或通过按 Enter 键执行搜索时调用。如果操作原因是 ，它还传递操作原因和源对象'SUGGESTION_SELECT'。

因此，您可以在主页上获取所选值，然后使用它在结果页面上进行搜索。这个值可以存储在你的组件状态中用于搜索，或者你也可以DataSearch在你的结果页面中添加一个并使用URLParamsprop 从 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使用defaultQueryprop docs查询结果页面。

其它你可能感兴趣的问题
上一篇流星 + react + Highchart 下一篇单击外部组件时关闭弹出窗口