잊기

[React] onKeyDown 이벤트 ( 클릭 대신 엔터키로 로그인, 회원가입 ) 본문

React !

[React] onKeyDown 이벤트 ( 클릭 대신 엔터키로 로그인, 회원가입 )

잊기 2023. 4. 3. 16:50

검색어 기입 후 '검색' 버튼 클릭 대신 'Enter'를 치는 사람이 많을 것이다

Button 에 onClick 이벵은 구현해놓았으니,

키보드이벤트를 추가해보자

 

내용 입력 후 회원가입 버튼 클릭 시 '회원가입 완료'

-> 비밀번호 확인에 작성 후 'ENTER키' 누를 때도 회원가입 완료 하고싶어

 

< 키보드 이벤트 >

onKeyDown -> 키를 누를때 실행

onKeyUp -> 키늘 눌렀다가 뗄 때 실행

 

 

<수정>

1. " 비밀번호 확인 "  input 박스에  onKeyDown   이벤트 추가 

 

2. 주석처리한 부분을 함수로 분리

3. onClick 이벤트로 함수 호출

 

 

- 로그인페이지도 바꾸자

login 함수가 이미 만들어져이뜸 (개꿀)

 input 박스에 onKeyDown  이벵 추가

끗 !

 

 

- Admin 페이지에 있는 '검색' 버튼에도 적용하자

검색어 입력 후 버튼 클릭을 하는 것에 '온키' 이벤트를 추가하는것 작업이기 때문에

대부분 함수는 분리, 작성되어있다 (상동)

바로 뒤의 버튼에 붙어있는 함수를 찾아서 붙여주면 OK !

 

'React !' 카테고리의 다른 글

[React] Error Code  (0) 2023.03.15