React InstantSearch - 在使用 searchBox 之前，如何从屏幕上隐藏“点击”？答案

【问题标题】：React InstantSearch- How do you hide "hits" from the screen until the searchBox is used?React InstantSearch - 在使用 searchBox 之前，如何从屏幕上隐藏“点击”？
【发布时间】：2021-12-16 19:58:00
【问题描述】：

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

我从这里开始我的研究：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>
  )
}

【问题讨论】：

标签： javascript reactjs next.js algolia react-instantsearch

【解决方案1】：

您可以为“显示点击”创建一个布尔状态，并在搜索框获得焦点时将其设置为 true，在“模糊”时将其设置为 false。

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

...

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

...

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

这里有一个codesandbox 演示了这一点。

【讨论】：