1

我在 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>
  )
}
4

1 回答 1

1

您可以为“显示命中”创建一个布尔状态，并将其设置为true搜索框聚焦时和false“模糊”时。

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

...

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

...

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

这是一个演示这一点的代码框。

于 2021-12-04T03:58:12.947 回答