엔터키 이벤트(onKeyPress) 혹은 특정키 이벤트

검색창을 만들고 있는데, 버튼클릭(onClick)이벤트 말고도 Enter키로도 작동시키고 싶었다.

 

적어도 필수라고 생각했다. 나조차도 엔터키로 사용하니까!!

 

사용한 코드는 아래와 같고, html태그 속성에

 

onKeyPress={
            (e)=>{
              if(e.key==='Enter'){
                
            }
          }

이와같이 사용해주면 된다. 응용해서 다른키도 얼마든지 이벤트 효과를 줄 수 있다.

NavBar.js

........

<TextField
          id="standard-search"
          label="라면검색"
          defaultValue={search}
          type="search"
          variant="standard"
          color="warning"
          onChange={handleChange}
          onKeyPress={
            (e)=>{
              if(e.key==='Enter'){
                router.push(
                  {
                  pathname: '/SearchTextResult',
                  query: { 
                    "textResult":search,
      
                   },
                },
                `/SearchTextResult`
                )
              }
            }
          }
        />
         <IconButton type="submit" sx={{ p: '10px' }} aria-label="search" onClick={()=>{
           router.push(
            {
            pathname: '/SearchTextResult',
            query: { 
              "textResult":search,

             },
          },
          `/SearchTextResult`
          )
         }}>
        <SearchIcon />
      </IconButton>
  </div>
  
  .....