[React] input창에서 엔터키로 이벤트 처리하기

펭귄안녕·2024년 10월 3일

React

목록 보기
2/5
post-thumbnail

핸들링 함수

  function handleKeyPress(e){
    if(e.key==='Enter'){
      goLogin()
    }
  }

onKeyDown

<div>
	<table className='login-table'>
		<thead></thead>
		<tbody>
			<tr>
			<td><input type='text' name='memId' placeholder='아이디를 입력하세요' 				className='login-input'
				onChange={(e)=>{inputLogin(e)}}></input></td>
			</tr>
			<tr>
				<td><input type='password' name='memPw' placeholder='비밀번호를 입력하세요' className='login-input'
					onKeyDown={(e)=>{handleKeyPress(e)}}
					onChange={(e)=>{inputLogin(e)}}></input></td>
            </tr>
		</tbody>
	</table>
    <button type='button' className='login-Btn'
		onClick={(e)=>{goLogin();}}>로그인</button>
</div>

onKeyPress는 사용이 안되어서
onKeyUp이나 onKeyDown쓰면 될 것 같다.

아쉬운 점

  • input창을 활성화해서 처리하는게 아닌 버튼 클릭 방식으로 처리하고 싶다.
  • 위와 같은 이유로 아이디와 비밀번호가 자동 입력 될 경우는 이벤트 처리가 안 된다.
  • 모달창에서도 엔터키로 확인 이벤트를 처리하고 싶다.
    => 결국 엔터키로 버튼 onClick 이벤트를 처리하고 싶음.

0개의 댓글