How to start a search with the Submit button #5293

ohanamaru · 2022-01-28T05:24:05Z

ohanamaru
Jan 28, 2022

I've just added a full text search feature using React instantsearch dom.
In the full text search, the search starts automatically when you type, but I want to make it so that you can start the search by pressing the submit button.
Does anyone know how to do this?

The current code is this↓.

import React, { useState, useEffect } from "react"
import { Link } from 'react-router-dom';
import { db } from "../../../firebaseConfig"
import {
    collection,
    orderBy,
    query,
    getDocs,
    limit
} from 'firebase/firestore';
import 'firebase/compat/auth'
import MainTopImg from '../../../images/imecon-personal-color.jpeg'
import Header from "../../block/Header"
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';

const MobileContents = () => {   
    const [list, setList] = useState([]);
    const client = algoliasearch(
        process.env.REACT_APP_ALGOLIA_ID,
        process.env.REACT_APP_ADMIN_API_KEY
    );

    useEffect(() => {
        (async () => {
            const salons = query(collection(db, "salon"), orderBy("createAt", "desc"), limit(5));
            const querySnapshot = await getDocs(salons);
            let salonList = [];
            await querySnapshot.forEach((doc) => {
                console.log(doc._document.data.value.mapValue.fields)
                salonList = [...salonList, {
                    salonId: doc._document.data.value.mapValue.fields.salonId.stringValue,
                    salonName: doc._document.data.value.mapValue.fields.salonName.stringValue,
                }]
            });
            setList(salonList)
        })();
    }, []);

    function HitComponent(hit) {
        console.log(hit.hit)
        return (
            <div>
                <Link to={'salon/' + hit.hit.hit.salonId}>
                    <p className="hover:text-[#06bbbc]">{hit.hit.hit.salonName}</p>
                </Link>
            </div>
        );
    }

    const hitComponent = (hit) => (
        <HitComponent hit={hit} onClick={() => null} />
    );

    return (
        <div>
            <Header />
            <div>
                <img src={MainTopImg} alt="mainTopImg" style={{maxWidth: 400 + 'px'}} />
                <Link to="/mypage">MyPage</Link>
                <div>
                    <h3>Serach</h3>
                    <div>
                        <InstantSearch indexName={"image-consult-app"} searchClient={client}>
                            <SearchBox />
                            <Hits hitComponent={hitComponent}/>
                        </InstantSearch>
                    </div>
                </div>
                <div>
                    <h3>New Salon List</h3>
                    {list.map((data) => {
                        return (
                            <li key={data.salonId}>
                                <Link to={'/salon/' + data.salonId}>
                                    <p>Salon Name：{data.salonName}</p>
                                </Link>
                            </li>
                        )
                    })}
                </div>
            </div>
        </div>
    );
}

export default MobileContents;