1

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

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

4

1 回答 1

1

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

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

所以你可以在主页上获取选中的值，然后用它在结果页面上进行搜索。该值可以存储在组件的状态中以进行搜索，或者您也可以DataSearch在结果页面中添加 a 并使用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']
  }}
/>

或者，您可以使用onValueSelectedon homepage 将所选值设置为 state（或 store），然后使用prop docsReactiveList查询on 结果页面。defaultQuery

于 2018-08-19T06:21:59.157 回答