React InstantSearch - 在使用搜索框之前如何从屏幕上隐藏 "hits"？

Question

我在 Algolia 中使用 React InstantSearch，我试图让它默认隐藏其“点击”组件，并且仅在需要使用并单击搜索框时显示。

我在这里开始我的研究：https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/react/?client=jsx#handling-the-empty-query

我能够使用该查询，但不知道如何将其应用于“点击”组件。

到目前为止我的代码中有这个：

import React from "react";
import Head from 'next/head'
import Header from '../components/Header'
import Hero from '../components/Hero'
import Titles from '../components/Titles'
import CustomHits from "../components/CustomHits";
import { useRouter } from 'next/router'
import Screenfull from "../components/Screenfull"
import { useRef } from "react";
import algoliasearch from "algoliasearch/lite";
import { InstantSearch, SearchBox, Hits, Configure, Pagination, RefinementList, connectStateResults, connectHits, Results } from "react-instantsearch-dom";
    
const searchClient = algoliasearch(
    ("XXXXXXXXXXXX"),
    ("XXXXXXXXXXXXXXX"),
);

const Hit = ({ hit }) => <p>{hit.title}</p>;

export default function Home({ninjas}) {
  const Results = connectStateResults(({ searchState }) =>
    searchState && searchState.query ? (
      <div>Searching for query {searchState.query}</div>
    ) : (
      <div>No query</div>
    )
  );

  return (
    <div>
      <Head>
        <title>Minerva</title>
        <link rel="icon" href="/favicon.ico" />     
      </Head>      
      <Header />
      <Hero />    
      <>
        <InstantSearch 
          searchClient={searchClient} 
          indexName="prod_Directory">  
          {/* Adding Search Box */}        
          <SearchBox/>               
          {/* Adding Data */}
          <Configure  hitsPerPage={2} />
          <RefinementList attribute="title" />
          <Hits  className ="bg-gray-500 z-50" hitComponent={Hit}/>
        <Results />
        </InstantSearch>
      </>  
      <Titles title='SERIES'/>
      <CustomHits />
    </div>
  )
}

Answer 1

您可以为“显示匹配”创建布尔状态，并在搜索框聚焦时将其设置为 true，在“模糊”时将其设置为 false。

const [showHits, setShowHits] = useState(false);

...

<SearchBox onFocus={()=>setShowHits(true)} onBlur={()=>setShowHits(false)}/>

...

{showHits ? <Hits hitComponent={Hit} /> : null}

这里有一个 codesandbox 演示。

React InstantSearch - 在使用搜索框之前如何从屏幕上隐藏 "hits"？

React InstantSearch- How do you hide "hits" from the screen until the searchBox is used?

javascript

reactjs

algolia

next.js

react-instantsearch