검색창 EnterKey 기능 구현

메인 페이지

 

검색기능을 구현할때 서치창 버튼이 아닌 EnterKey를 누르면 작동이 되게 하려고 한다.

useHistory 기능은 더이상 지원 하지 않기 때문에 useNavigate로 대체해야 한다.

// 검색창에서 검색
    const getDataList = () => {
        if (search.trim().length != 0){
           	history.push(`/list/${search}`);
        }
    }

history를 사용한다면 push 까지 작성해야 하겠으나 Navigate 는 push가 없어도 되는듯 하다.

 // 검색창에서 검색
    const getDataList = () => {
        if (search.trim().length != 0){
            navigate(`/list/${search}`);
        }
    }

 

메인페이지 검색창

import { useNavigate } from 'react-router-dom';

function Main(){

	const [search, setSearch] = useState<string>('');
	const navigate = useNavigate();

 // 검색창에서 검색
    const getDataList = () => {
        if (search.trim().length != 0){
            navigate(`/list/${search}`);
        }
    }
    
    //엔터키 이벤트
    const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
        if(e.key === 'Enter') {
            getDataList();
        }
    }
    
     <input type="text" className="m_search_input4" maxLength={20} placeholder="배우고 싶은 지식을 검색하세요" onChange={(e) => setSearch(e.target.value)} onKeyPress={handleKeyPress}/>
     
         );
}

export default Main;

 

리스트 페이지 검색기능

 

//엔터 할때 찾아가는 주소 및 서치
    const getDataList = () => {
      if (search.trim().length != 0){
          searchHandler(); //기존에 있는 코드 사용
      }
    }

리스트 부분은 동료가 작성한 부분이라 건들지 않고 searchHandler 부분을 그대로 가지고 왔다.

리스트 검색창

import React, { useEffect, useState, KeyboardEvent} from 'react';

export default function List() {

//엔터 할때 찾아가는 주소 및 서치
    const getDataList = () => {
      if (search.trim().length != 0){
          searchHandler(); //기존에 있는 코드 사용
      }
    }

    // 엔터키 이벤트
    const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
      if(e.key === 'Enter') {
        console.log();
        getDataList();
      }
    }
    
    const searchHandler = () => {

    axios.get("http://localhost:4040/api/list/" + search)
    .then((Response) => {
      const tmp = [];
      setRequestResult('success!');

      for(let i = 0; i < Response.data.data.length; i++){
        tmp.push({
          idClass: Response.data.data[i].idClass,
          img: Response.data.data[i].img,
          className: Response.data.data[i].className,
          instructor: Response.data.data[i].instructor,
          price: Response.data.data[i].price,
          discountRateRate: Response.data.data[i].discountRateRate,
          studentCount: Response.data.data[i].studentCount,
          grade: Response.data.data[i].grade
        })
      }
      setItemList(tmp);

    })
    .catch((error) =>{
      setRequestResult('Failed!');
    })
  }
  
  <input type="text" id='search' className="search-input3" placeholder="개발/프로그래밍 검색" onChange={(e) => setSearch(e.target.value)} onKeyPress={handleKeyPress} />