상세 컨텐츠

본문 제목

[React] onKeyDown, onKeyUp, onKeyPress

REACT

by 혀누쓰0 2022. 8. 3. 23:00

본문

 

 

 

 

 

onKeyUp

 

한/영, 한자, 특수키 제외 가능하다

 

키를 입력하고 땟을때 작동한다.

 

 

 

 

 

 

 

onKeyDown

 

onKeyUp과 동일하나 

 

차이점은

 

키를 입력하면 작동한다.

 

 

 

 

 

 

onKeyPress

 

 

onKeyDown이랑 똑같이 키를 입력하면 작동한다.

 

차이점으로는 추가적으로 

 

onKeyUp, onKeyDown과 다르게 Enter, crtl,backspace, tab들은 인식하지 못한다

 

 

 

 

 

 

 

 

 

 

  const 함수명 = (e) => {
    if( e.key === '입력할 키' ){
      `동작할 코드`
    }
  }


<input type='text' onKeydown = { 함수명 } />

'REACT' 카테고리의 다른 글

[React] SPA, DOM, virtual DOM(가상 돔)  (0) 2022.08.16
[React] 리액트 to do list  (0) 2022.08.12
[React] 리액트 훅( useMemo, useCallback )  (0) 2022.07.19
[React] 리액트 훅( useReducer )  (0) 2022.07.16
[React] 리액트 훅( useRef )  (0) 2022.07.12

관련글 더보기