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道具文檔。