Algolia SearchBox - 我希望它仅在用户选择 SearchBox 时显示 Hits

Question

我几乎可以肯定我在某处看到了这种行为，所以我很确定它可以完成。目前，我有一个功能齐全的 SearchBox 元素，在它下面是 InfiniteHits。但我希望在用户点击搜索框（但尚未输入任何内容）后开始加载命中。

如果这太难了，我也可以在用户将文本输入搜索框之前不显示任何内容。

当时，我的思路是创建一个 <Configure hitsPerPage={}/> object, and then somehow manipulating the hitsPerPage through <SearchBox onClick={} />，但我没有成功。

对于某些上下文，这是我页面的一般结构：

<div>
    <InstantSearch>
        <div>
            <SearchBox/>
            <InfiniteHits/>
        </div>
    </InstantSearch>
</div>)

TLDR：我需要帮助实现我的搜索框的以下行为之一

1.直到用户点击搜索框才显示匹配

2。在用户将文本输入 SearchBox

之前，不会显示任何匹配项

Answer 1

可以阻止初始搜索 - docs

当没有结果（或未搜索到）时，我们可以使用条件渲染显示 null 而不是 <InfiniteHits/> - docs example

您随时可以准备自己的组件。

Algolia SearchBox - I want it to show Hits only when the user selects the SearchBox